
<!-- saved from url=(0015)http://vifo.me/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><div class="line-gutter-backdrop"></div><table><tbody><tr><td class="line-number" value="1"></td><td class="line-content"><span class="html-doctype">&lt;!doctype html&gt;</span></td></tr><tr><td class="line-number" value="2"></td><td class="line-content"><span class="html-tag">&lt;html&gt;</span></td></tr><tr><td class="line-number" value="3"></td><td class="line-content"><span class="html-tag">&lt;head&gt;</span></td></tr><tr><td class="line-number" value="4"></td><td class="line-content"><span class="html-tag">&lt;meta <span class="html-attribute-name">charset</span>="<span class="html-attribute-value">utf-8</span>"&gt;</span></td></tr><tr><td class="line-number" value="5"></td><td class="line-content"><span class="html-tag">&lt;title&gt;</span>等你<span class="html-tag">&lt;/title&gt;</span></td></tr><tr><td class="line-number" value="6"></td><td class="line-content"><span class="html-tag">&lt;/head&gt;</span></td></tr><tr><td class="line-number" value="7"></td><td class="line-content"><span class="html-tag">&lt;style&gt;</span></td></tr><tr><td class="line-number" value="8"></td><td class="line-content">body {</td></tr><tr><td class="line-number" value="9"></td><td class="line-content">    padding:0;</td></tr><tr><td class="line-number" value="10"></td><td class="line-content">    margin:0;</td></tr><tr><td class="line-number" value="11"></td><td class="line-content">    overflow:hidden;</td></tr><tr><td class="line-number" value="12"></td><td class="line-content">	height: 600px;</td></tr><tr><td class="line-number" value="13"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="14"></td><td class="line-content">canvas {</td></tr><tr><td class="line-number" value="15"></td><td class="line-content">    padding:0;</td></tr><tr><td class="line-number" value="16"></td><td class="line-content">    margin:0;</td></tr><tr><td class="line-number" value="17"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="18"></td><td class="line-content">div.btnbg {</td></tr><tr><td class="line-number" value="19"></td><td class="line-content">    position:fixed;</td></tr><tr><td class="line-number" value="20"></td><td class="line-content">    left:0;</td></tr><tr><td class="line-number" value="21"></td><td class="line-content">    top:0;</td></tr><tr><td class="line-number" value="22"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="23"></td><td class="line-content"><span class="html-tag">&lt;/style&gt;</span></td></tr><tr><td class="line-number" value="24"></td><td class="line-content"><span class="html-tag">&lt;body&gt;</span></td></tr><tr><td class="line-number" value="25"></td><td class="line-content"><span class="html-tag">&lt;canvas <span class="html-attribute-name">id</span>="<span class="html-attribute-value">sakura</span>"&gt;</span><span class="html-tag">&lt;/canvas&gt;</span></td></tr><tr><td class="line-number" value="26"></td><td class="line-content"><span class="html-tag">&lt;div <span class="html-attribute-name">class</span>="<span class="html-attribute-value">btnbg</span>"&gt;</span></td></tr><tr><td class="line-number" value="27"></td><td class="line-content"><span class="html-tag">&lt;/div&gt;</span></td></tr><tr><td class="line-number" value="28"></td><td class="line-content"></td></tr><tr><td class="line-number" value="29"></td><td class="line-content"><span class="html-comment">&lt;!-- sakura shader --&gt;</span></td></tr><tr><td class="line-number" value="30"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">sakura_point_vsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_vertex</span>"&gt;</span></td></tr><tr><td class="line-number" value="31"></td><td class="line-content">uniform mat4 uProjection;</td></tr><tr><td class="line-number" value="32"></td><td class="line-content">uniform mat4 uModelview;</td></tr><tr><td class="line-number" value="33"></td><td class="line-content">uniform vec3 uResolution;</td></tr><tr><td class="line-number" value="34"></td><td class="line-content">uniform vec3 uOffset;</td></tr><tr><td class="line-number" value="35"></td><td class="line-content">uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius</td></tr><tr><td class="line-number" value="36"></td><td class="line-content">uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start</td></tr><tr><td class="line-number" value="37"></td><td class="line-content"></td></tr><tr><td class="line-number" value="38"></td><td class="line-content">attribute vec3 aPosition;</td></tr><tr><td class="line-number" value="39"></td><td class="line-content">attribute vec3 aEuler;</td></tr><tr><td class="line-number" value="40"></td><td class="line-content">attribute vec2 aMisc; //x:size, y:fade</td></tr><tr><td class="line-number" value="41"></td><td class="line-content"></td></tr><tr><td class="line-number" value="42"></td><td class="line-content">varying vec3 pposition;</td></tr><tr><td class="line-number" value="43"></td><td class="line-content">varying float psize;</td></tr><tr><td class="line-number" value="44"></td><td class="line-content">varying float palpha;</td></tr><tr><td class="line-number" value="45"></td><td class="line-content">varying float pdist;</td></tr><tr><td class="line-number" value="46"></td><td class="line-content"></td></tr><tr><td class="line-number" value="47"></td><td class="line-content">//varying mat3 rotMat;</td></tr><tr><td class="line-number" value="48"></td><td class="line-content">varying vec3 normX;</td></tr><tr><td class="line-number" value="49"></td><td class="line-content">varying vec3 normY;</td></tr><tr><td class="line-number" value="50"></td><td class="line-content">varying vec3 normZ;</td></tr><tr><td class="line-number" value="51"></td><td class="line-content">varying vec3 normal;</td></tr><tr><td class="line-number" value="52"></td><td class="line-content"></td></tr><tr><td class="line-number" value="53"></td><td class="line-content">varying float diffuse;</td></tr><tr><td class="line-number" value="54"></td><td class="line-content">varying float specular;</td></tr><tr><td class="line-number" value="55"></td><td class="line-content">varying float rstop;</td></tr><tr><td class="line-number" value="56"></td><td class="line-content">varying float distancefade;</td></tr><tr><td class="line-number" value="57"></td><td class="line-content"></td></tr><tr><td class="line-number" value="58"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="59"></td><td class="line-content">    // Projection is based on vertical angle</td></tr><tr><td class="line-number" value="60"></td><td class="line-content">    vec4 pos = uModelview * vec4(aPosition + uOffset, 1.0);</td></tr><tr><td class="line-number" value="61"></td><td class="line-content">    gl_Position = uProjection * pos;</td></tr><tr><td class="line-number" value="62"></td><td class="line-content">    gl_PointSize = aMisc.x * uProjection[1][1] / -pos.z * uResolution.y * 0.5;</td></tr><tr><td class="line-number" value="63"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="64"></td><td class="line-content">    pposition = pos.xyz;</td></tr><tr><td class="line-number" value="65"></td><td class="line-content">    psize = aMisc.x;</td></tr><tr><td class="line-number" value="66"></td><td class="line-content">    pdist = length(pos.xyz);</td></tr><tr><td class="line-number" value="67"></td><td class="line-content">    palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / uFade.z);</td></tr><tr><td class="line-number" value="68"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="69"></td><td class="line-content">    vec3 elrsn = sin(aEuler);</td></tr><tr><td class="line-number" value="70"></td><td class="line-content">    vec3 elrcs = cos(aEuler);</td></tr><tr><td class="line-number" value="71"></td><td class="line-content">    mat3 rotx = mat3(</td></tr><tr><td class="line-number" value="72"></td><td class="line-content">        1.0, 0.0, 0.0,</td></tr><tr><td class="line-number" value="73"></td><td class="line-content">        0.0, elrcs.x, elrsn.x,</td></tr><tr><td class="line-number" value="74"></td><td class="line-content">        0.0, -elrsn.x, elrcs.x</td></tr><tr><td class="line-number" value="75"></td><td class="line-content">    );</td></tr><tr><td class="line-number" value="76"></td><td class="line-content">    mat3 roty = mat3(</td></tr><tr><td class="line-number" value="77"></td><td class="line-content">        elrcs.y, 0.0, -elrsn.y,</td></tr><tr><td class="line-number" value="78"></td><td class="line-content">        0.0, 1.0, 0.0,</td></tr><tr><td class="line-number" value="79"></td><td class="line-content">        elrsn.y, 0.0, elrcs.y</td></tr><tr><td class="line-number" value="80"></td><td class="line-content">    );</td></tr><tr><td class="line-number" value="81"></td><td class="line-content">    mat3 rotz = mat3(</td></tr><tr><td class="line-number" value="82"></td><td class="line-content">        elrcs.z, elrsn.z, 0.0, </td></tr><tr><td class="line-number" value="83"></td><td class="line-content">        -elrsn.z, elrcs.z, 0.0,</td></tr><tr><td class="line-number" value="84"></td><td class="line-content">        0.0, 0.0, 1.0</td></tr><tr><td class="line-number" value="85"></td><td class="line-content">    );</td></tr><tr><td class="line-number" value="86"></td><td class="line-content">    mat3 rotmat = rotx * roty * rotz;</td></tr><tr><td class="line-number" value="87"></td><td class="line-content">    normal = rotmat[2];</td></tr><tr><td class="line-number" value="88"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="89"></td><td class="line-content">    mat3 trrotm = mat3(</td></tr><tr><td class="line-number" value="90"></td><td class="line-content">        rotmat[0][0], rotmat[1][0], rotmat[2][0],</td></tr><tr><td class="line-number" value="91"></td><td class="line-content">        rotmat[0][1], rotmat[1][1], rotmat[2][1],</td></tr><tr><td class="line-number" value="92"></td><td class="line-content">        rotmat[0][2], rotmat[1][2], rotmat[2][2]</td></tr><tr><td class="line-number" value="93"></td><td class="line-content">    );</td></tr><tr><td class="line-number" value="94"></td><td class="line-content">    normX = trrotm[0];</td></tr><tr><td class="line-number" value="95"></td><td class="line-content">    normY = trrotm[1];</td></tr><tr><td class="line-number" value="96"></td><td class="line-content">    normZ = trrotm[2];</td></tr><tr><td class="line-number" value="97"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="98"></td><td class="line-content">    const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);</td></tr><tr><td class="line-number" value="99"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="100"></td><td class="line-content">    float tmpdfs = dot(lit, normal);</td></tr><tr><td class="line-number" value="101"></td><td class="line-content">    if(tmpdfs &lt; 0.0) {</td></tr><tr><td class="line-number" value="102"></td><td class="line-content">        normal = -normal;</td></tr><tr><td class="line-number" value="103"></td><td class="line-content">        tmpdfs = dot(lit, normal);</td></tr><tr><td class="line-number" value="104"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="105"></td><td class="line-content">    diffuse = 0.4 + tmpdfs;</td></tr><tr><td class="line-number" value="106"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="107"></td><td class="line-content">    vec3 eyev = normalize(-pos.xyz);</td></tr><tr><td class="line-number" value="108"></td><td class="line-content">    if(dot(eyev, normal) &gt; 0.0) {</td></tr><tr><td class="line-number" value="109"></td><td class="line-content">        vec3 hv = normalize(eyev + lit);</td></tr><tr><td class="line-number" value="110"></td><td class="line-content">        specular = pow(max(dot(hv, normal), 0.0), 20.0);</td></tr><tr><td class="line-number" value="111"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="112"></td><td class="line-content">    else {</td></tr><tr><td class="line-number" value="113"></td><td class="line-content">        specular = 0.0;</td></tr><tr><td class="line-number" value="114"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="115"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="116"></td><td class="line-content">    rstop = clamp((abs(pdist - uDOF.x) - uDOF.y) / uDOF.z, 0.0, 1.0);</td></tr><tr><td class="line-number" value="117"></td><td class="line-content">    rstop = pow(rstop, 0.5);</td></tr><tr><td class="line-number" value="118"></td><td class="line-content">    //-0.69315 = ln(0.5)</td></tr><tr><td class="line-number" value="119"></td><td class="line-content">    distancefade = min(1.0, exp((uFade.x - pdist) * 0.69315 / uFade.y));</td></tr><tr><td class="line-number" value="120"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="121"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="122"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">sakura_point_fsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_fragment</span>"&gt;</span></td></tr><tr><td class="line-number" value="123"></td><td class="line-content">#ifdef GL_ES</td></tr><tr><td class="line-number" value="124"></td><td class="line-content">//precision mediump float;</td></tr><tr><td class="line-number" value="125"></td><td class="line-content">precision highp float;</td></tr><tr><td class="line-number" value="126"></td><td class="line-content">#endif</td></tr><tr><td class="line-number" value="127"></td><td class="line-content"></td></tr><tr><td class="line-number" value="128"></td><td class="line-content">uniform vec3 uDOF;  //x:focus distance, y:focus radius, z:max radius</td></tr><tr><td class="line-number" value="129"></td><td class="line-content">uniform vec3 uFade; //x:start distance, y:half distance, z:near fade start</td></tr><tr><td class="line-number" value="130"></td><td class="line-content"></td></tr><tr><td class="line-number" value="131"></td><td class="line-content">const vec3 fadeCol = vec3(0.08, 0.03, 0.06);</td></tr><tr><td class="line-number" value="132"></td><td class="line-content"></td></tr><tr><td class="line-number" value="133"></td><td class="line-content">varying vec3 pposition;</td></tr><tr><td class="line-number" value="134"></td><td class="line-content">varying float psize;</td></tr><tr><td class="line-number" value="135"></td><td class="line-content">varying float palpha;</td></tr><tr><td class="line-number" value="136"></td><td class="line-content">varying float pdist;</td></tr><tr><td class="line-number" value="137"></td><td class="line-content"></td></tr><tr><td class="line-number" value="138"></td><td class="line-content">//varying mat3 rotMat;</td></tr><tr><td class="line-number" value="139"></td><td class="line-content">varying vec3 normX;</td></tr><tr><td class="line-number" value="140"></td><td class="line-content">varying vec3 normY;</td></tr><tr><td class="line-number" value="141"></td><td class="line-content">varying vec3 normZ;</td></tr><tr><td class="line-number" value="142"></td><td class="line-content">varying vec3 normal;</td></tr><tr><td class="line-number" value="143"></td><td class="line-content"></td></tr><tr><td class="line-number" value="144"></td><td class="line-content">varying float diffuse;</td></tr><tr><td class="line-number" value="145"></td><td class="line-content">varying float specular;</td></tr><tr><td class="line-number" value="146"></td><td class="line-content">varying float rstop;</td></tr><tr><td class="line-number" value="147"></td><td class="line-content">varying float distancefade;</td></tr><tr><td class="line-number" value="148"></td><td class="line-content"></td></tr><tr><td class="line-number" value="149"></td><td class="line-content">float ellipse(vec2 p, vec2 o, vec2 r) {</td></tr><tr><td class="line-number" value="150"></td><td class="line-content">    vec2 lp = (p - o) / r;</td></tr><tr><td class="line-number" value="151"></td><td class="line-content">    return length(lp) - 1.0;</td></tr><tr><td class="line-number" value="152"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="153"></td><td class="line-content"></td></tr><tr><td class="line-number" value="154"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="155"></td><td class="line-content">    vec3 p = vec3(gl_PointCoord - vec2(0.5, 0.5), 0.0) * 2.0;</td></tr><tr><td class="line-number" value="156"></td><td class="line-content">    vec3 d = vec3(0.0, 0.0, -1.0);</td></tr><tr><td class="line-number" value="157"></td><td class="line-content">    float nd = normZ.z; //dot(-normZ, d);</td></tr><tr><td class="line-number" value="158"></td><td class="line-content">    if(abs(nd) &lt; 0.0001) discard;</td></tr><tr><td class="line-number" value="159"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="160"></td><td class="line-content">    float np = dot(normZ, p);</td></tr><tr><td class="line-number" value="161"></td><td class="line-content">    vec3 tp = p + d * np / nd;</td></tr><tr><td class="line-number" value="162"></td><td class="line-content">    vec2 coord = vec2(dot(normX, tp), dot(normY, tp));</td></tr><tr><td class="line-number" value="163"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="164"></td><td class="line-content">    //angle = 15 degree</td></tr><tr><td class="line-number" value="165"></td><td class="line-content">    const float flwrsn = 0.258819045102521;</td></tr><tr><td class="line-number" value="166"></td><td class="line-content">    const float flwrcs = 0.965925826289068;</td></tr><tr><td class="line-number" value="167"></td><td class="line-content">    mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);</td></tr><tr><td class="line-number" value="168"></td><td class="line-content">    vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;</td></tr><tr><td class="line-number" value="169"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="170"></td><td class="line-content">    float r;</td></tr><tr><td class="line-number" value="171"></td><td class="line-content">    if(flwrp.x &lt; 0.0) {</td></tr><tr><td class="line-number" value="172"></td><td class="line-content">        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);</td></tr><tr><td class="line-number" value="173"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="174"></td><td class="line-content">    else {</td></tr><tr><td class="line-number" value="175"></td><td class="line-content">        r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);</td></tr><tr><td class="line-number" value="176"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="177"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="178"></td><td class="line-content">    if(r &gt; rstop) discard;</td></tr><tr><td class="line-number" value="179"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="180"></td><td class="line-content">    vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);</td></tr><tr><td class="line-number" value="181"></td><td class="line-content">    float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));</td></tr><tr><td class="line-number" value="182"></td><td class="line-content">    col *= vec3(1.0, grady, grady);</td></tr><tr><td class="line-number" value="183"></td><td class="line-content">    col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));</td></tr><tr><td class="line-number" value="184"></td><td class="line-content">    col = col * diffuse + specular;</td></tr><tr><td class="line-number" value="185"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="186"></td><td class="line-content">    col = mix(fadeCol, col, distancefade);</td></tr><tr><td class="line-number" value="187"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="188"></td><td class="line-content">    float alpha = (rstop &gt; 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;</td></tr><tr><td class="line-number" value="189"></td><td class="line-content">    alpha = smoothstep(0.0, 1.0, alpha) * palpha;</td></tr><tr><td class="line-number" value="190"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="191"></td><td class="line-content">    gl_FragColor = vec4(col * 0.5, alpha);</td></tr><tr><td class="line-number" value="192"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="193"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="194"></td><td class="line-content"><span class="html-comment">&lt;!-- effects --&gt;</span></td></tr><tr><td class="line-number" value="195"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fx_common_vsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_vertex</span>"&gt;</span></td></tr><tr><td class="line-number" value="196"></td><td class="line-content">uniform vec3 uResolution;</td></tr><tr><td class="line-number" value="197"></td><td class="line-content">attribute vec2 aPosition;</td></tr><tr><td class="line-number" value="198"></td><td class="line-content"></td></tr><tr><td class="line-number" value="199"></td><td class="line-content">varying vec2 texCoord;</td></tr><tr><td class="line-number" value="200"></td><td class="line-content">varying vec2 screenCoord;</td></tr><tr><td class="line-number" value="201"></td><td class="line-content"></td></tr><tr><td class="line-number" value="202"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="203"></td><td class="line-content">    gl_Position = vec4(aPosition, 0.0, 1.0);</td></tr><tr><td class="line-number" value="204"></td><td class="line-content">    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);</td></tr><tr><td class="line-number" value="205"></td><td class="line-content">    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);</td></tr><tr><td class="line-number" value="206"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="207"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="208"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">bg_fsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_fragment</span>"&gt;</span></td></tr><tr><td class="line-number" value="209"></td><td class="line-content">#ifdef GL_ES</td></tr><tr><td class="line-number" value="210"></td><td class="line-content">//precision mediump float;</td></tr><tr><td class="line-number" value="211"></td><td class="line-content">precision highp float;</td></tr><tr><td class="line-number" value="212"></td><td class="line-content">#endif</td></tr><tr><td class="line-number" value="213"></td><td class="line-content"></td></tr><tr><td class="line-number" value="214"></td><td class="line-content">uniform vec2 uTimes;</td></tr><tr><td class="line-number" value="215"></td><td class="line-content"></td></tr><tr><td class="line-number" value="216"></td><td class="line-content">varying vec2 texCoord;</td></tr><tr><td class="line-number" value="217"></td><td class="line-content">varying vec2 screenCoord;</td></tr><tr><td class="line-number" value="218"></td><td class="line-content"></td></tr><tr><td class="line-number" value="219"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="220"></td><td class="line-content">    vec3 col;</td></tr><tr><td class="line-number" value="221"></td><td class="line-content">    float c;</td></tr><tr><td class="line-number" value="222"></td><td class="line-content">    vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);</td></tr><tr><td class="line-number" value="223"></td><td class="line-content">    c = exp(-pow(length(tmpv) * 1.8, 2.0));</td></tr><tr><td class="line-number" value="224"></td><td class="line-content">    col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);</td></tr><tr><td class="line-number" value="225"></td><td class="line-content">    gl_FragColor = vec4(col * 0.5, 1.0);</td></tr><tr><td class="line-number" value="226"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="227"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="228"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fx_brightbuf_fsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_fragment</span>"&gt;</span></td></tr><tr><td class="line-number" value="229"></td><td class="line-content">#ifdef GL_ES</td></tr><tr><td class="line-number" value="230"></td><td class="line-content">//precision mediump float;</td></tr><tr><td class="line-number" value="231"></td><td class="line-content">precision highp float;</td></tr><tr><td class="line-number" value="232"></td><td class="line-content">#endif</td></tr><tr><td class="line-number" value="233"></td><td class="line-content">uniform sampler2D uSrc;</td></tr><tr><td class="line-number" value="234"></td><td class="line-content">uniform vec2 uDelta;</td></tr><tr><td class="line-number" value="235"></td><td class="line-content"></td></tr><tr><td class="line-number" value="236"></td><td class="line-content">varying vec2 texCoord;</td></tr><tr><td class="line-number" value="237"></td><td class="line-content">varying vec2 screenCoord;</td></tr><tr><td class="line-number" value="238"></td><td class="line-content"></td></tr><tr><td class="line-number" value="239"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="240"></td><td class="line-content">    vec4 col = texture2D(uSrc, texCoord);</td></tr><tr><td class="line-number" value="241"></td><td class="line-content">    gl_FragColor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);</td></tr><tr><td class="line-number" value="242"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="243"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="244"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fx_dirblur_r4_fsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_fragment</span>"&gt;</span></td></tr><tr><td class="line-number" value="245"></td><td class="line-content">#ifdef GL_ES</td></tr><tr><td class="line-number" value="246"></td><td class="line-content">//precision mediump float;</td></tr><tr><td class="line-number" value="247"></td><td class="line-content">precision highp float;</td></tr><tr><td class="line-number" value="248"></td><td class="line-content">#endif</td></tr><tr><td class="line-number" value="249"></td><td class="line-content">uniform sampler2D uSrc;</td></tr><tr><td class="line-number" value="250"></td><td class="line-content">uniform vec2 uDelta;</td></tr><tr><td class="line-number" value="251"></td><td class="line-content">uniform vec4 uBlurDir; //dir(x, y), stride(z, w)</td></tr><tr><td class="line-number" value="252"></td><td class="line-content"></td></tr><tr><td class="line-number" value="253"></td><td class="line-content">varying vec2 texCoord;</td></tr><tr><td class="line-number" value="254"></td><td class="line-content">varying vec2 screenCoord;</td></tr><tr><td class="line-number" value="255"></td><td class="line-content"></td></tr><tr><td class="line-number" value="256"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="257"></td><td class="line-content">    vec4 col = texture2D(uSrc, texCoord);</td></tr><tr><td class="line-number" value="258"></td><td class="line-content">    col = col + texture2D(uSrc, texCoord + uBlurDir.xy * uDelta);</td></tr><tr><td class="line-number" value="259"></td><td class="line-content">    col = col + texture2D(uSrc, texCoord - uBlurDir.xy * uDelta);</td></tr><tr><td class="line-number" value="260"></td><td class="line-content">    col = col + texture2D(uSrc, texCoord + (uBlurDir.xy + uBlurDir.zw) * uDelta);</td></tr><tr><td class="line-number" value="261"></td><td class="line-content">    col = col + texture2D(uSrc, texCoord - (uBlurDir.xy + uBlurDir.zw) * uDelta);</td></tr><tr><td class="line-number" value="262"></td><td class="line-content">    gl_FragColor = col / 5.0;</td></tr><tr><td class="line-number" value="263"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="264"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="265"></td><td class="line-content"><span class="html-comment">&lt;!-- effect fragment shader template --&gt;</span></td></tr><tr><td class="line-number" value="266"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">fx_common_fsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_fragment</span>"&gt;</span></td></tr><tr><td class="line-number" value="267"></td><td class="line-content">#ifdef GL_ES</td></tr><tr><td class="line-number" value="268"></td><td class="line-content">//precision mediump float;</td></tr><tr><td class="line-number" value="269"></td><td class="line-content">precision highp float;</td></tr><tr><td class="line-number" value="270"></td><td class="line-content">#endif</td></tr><tr><td class="line-number" value="271"></td><td class="line-content">uniform sampler2D uSrc;</td></tr><tr><td class="line-number" value="272"></td><td class="line-content">uniform vec2 uDelta;</td></tr><tr><td class="line-number" value="273"></td><td class="line-content"></td></tr><tr><td class="line-number" value="274"></td><td class="line-content">varying vec2 texCoord;</td></tr><tr><td class="line-number" value="275"></td><td class="line-content">varying vec2 screenCoord;</td></tr><tr><td class="line-number" value="276"></td><td class="line-content"></td></tr><tr><td class="line-number" value="277"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="278"></td><td class="line-content">    gl_FragColor = texture2D(uSrc, texCoord);</td></tr><tr><td class="line-number" value="279"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="280"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="281"></td><td class="line-content"><span class="html-comment">&lt;!-- post processing --&gt;</span></td></tr><tr><td class="line-number" value="282"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">pp_final_vsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_vertex</span>"&gt;</span></td></tr><tr><td class="line-number" value="283"></td><td class="line-content">uniform vec3 uResolution;</td></tr><tr><td class="line-number" value="284"></td><td class="line-content">attribute vec2 aPosition;</td></tr><tr><td class="line-number" value="285"></td><td class="line-content">varying vec2 texCoord;</td></tr><tr><td class="line-number" value="286"></td><td class="line-content">varying vec2 screenCoord;</td></tr><tr><td class="line-number" value="287"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="288"></td><td class="line-content">    gl_Position = vec4(aPosition, 0.0, 1.0);</td></tr><tr><td class="line-number" value="289"></td><td class="line-content">    texCoord = aPosition.xy * 0.5 + vec2(0.5, 0.5);</td></tr><tr><td class="line-number" value="290"></td><td class="line-content">    screenCoord = aPosition.xy * vec2(uResolution.z, 1.0);</td></tr><tr><td class="line-number" value="291"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="292"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="293"></td><td class="line-content"><span class="html-tag">&lt;script <span class="html-attribute-name">id</span>="<span class="html-attribute-value">pp_final_fsh</span>" <span class="html-attribute-name">type</span>="<span class="html-attribute-value">x-shader/x_fragment</span>"&gt;</span></td></tr><tr><td class="line-number" value="294"></td><td class="line-content">#ifdef GL_ES</td></tr><tr><td class="line-number" value="295"></td><td class="line-content">//precision mediump float;</td></tr><tr><td class="line-number" value="296"></td><td class="line-content">precision highp float;</td></tr><tr><td class="line-number" value="297"></td><td class="line-content">#endif</td></tr><tr><td class="line-number" value="298"></td><td class="line-content">uniform sampler2D uSrc;</td></tr><tr><td class="line-number" value="299"></td><td class="line-content">uniform sampler2D uBloom;</td></tr><tr><td class="line-number" value="300"></td><td class="line-content">uniform vec2 uDelta;</td></tr><tr><td class="line-number" value="301"></td><td class="line-content">varying vec2 texCoord;</td></tr><tr><td class="line-number" value="302"></td><td class="line-content">varying vec2 screenCoord;</td></tr><tr><td class="line-number" value="303"></td><td class="line-content">void main(void) {</td></tr><tr><td class="line-number" value="304"></td><td class="line-content">    vec4 srccol = texture2D(uSrc, texCoord) * 2.0;</td></tr><tr><td class="line-number" value="305"></td><td class="line-content">    vec4 bloomcol = texture2D(uBloom, texCoord);</td></tr><tr><td class="line-number" value="306"></td><td class="line-content">    vec4 col;</td></tr><tr><td class="line-number" value="307"></td><td class="line-content">    col = srccol + bloomcol * (vec4(1.0) + srccol);</td></tr><tr><td class="line-number" value="308"></td><td class="line-content">    col *= smoothstep(1.0, 0.0, pow(length((texCoord - vec2(0.5)) * 2.0), 1.2) * 0.5);</td></tr><tr><td class="line-number" value="309"></td><td class="line-content">    col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)</td></tr><tr><td class="line-number" value="310"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="311"></td><td class="line-content">    gl_FragColor = vec4(col.rgb, 1.0);</td></tr><tr><td class="line-number" value="312"></td><td class="line-content">    gl_FragColor.a = 1.0;</td></tr><tr><td class="line-number" value="313"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="314"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="315"></td><td class="line-content"><span class="html-tag">&lt;/body&gt;</span></td></tr><tr><td class="line-number" value="316"></td><td class="line-content"><span class="html-tag">&lt;script&gt;</span></td></tr><tr><td class="line-number" value="317"></td><td class="line-content">// Utilities</td></tr><tr><td class="line-number" value="318"></td><td class="line-content">var Vector3 = {};</td></tr><tr><td class="line-number" value="319"></td><td class="line-content">var Matrix44 = {};</td></tr><tr><td class="line-number" value="320"></td><td class="line-content">Vector3.create = function(x, y, z) {</td></tr><tr><td class="line-number" value="321"></td><td class="line-content">    return {'x':x, 'y':y, 'z':z};</td></tr><tr><td class="line-number" value="322"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="323"></td><td class="line-content">Vector3.dot = function (v0, v1) {</td></tr><tr><td class="line-number" value="324"></td><td class="line-content">    return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;</td></tr><tr><td class="line-number" value="325"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="326"></td><td class="line-content">Vector3.cross = function (v, v0, v1) {</td></tr><tr><td class="line-number" value="327"></td><td class="line-content">    v.x = v0.y * v1.z - v0.z * v1.y;</td></tr><tr><td class="line-number" value="328"></td><td class="line-content">    v.y = v0.z * v1.x - v0.x * v1.z;</td></tr><tr><td class="line-number" value="329"></td><td class="line-content">    v.z = v0.x * v1.y - v0.y * v1.x;</td></tr><tr><td class="line-number" value="330"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="331"></td><td class="line-content">Vector3.normalize = function (v) {</td></tr><tr><td class="line-number" value="332"></td><td class="line-content">    var l = v.x * v.x + v.y * v.y + v.z * v.z;</td></tr><tr><td class="line-number" value="333"></td><td class="line-content">    if(l &gt; 0.00001) {</td></tr><tr><td class="line-number" value="334"></td><td class="line-content">        l = 1.0 / Math.sqrt(l);</td></tr><tr><td class="line-number" value="335"></td><td class="line-content">        v.x *= l;</td></tr><tr><td class="line-number" value="336"></td><td class="line-content">        v.y *= l;</td></tr><tr><td class="line-number" value="337"></td><td class="line-content">        v.z *= l;</td></tr><tr><td class="line-number" value="338"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="339"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="340"></td><td class="line-content">Vector3.arrayForm = function(v) {</td></tr><tr><td class="line-number" value="341"></td><td class="line-content">    if(v.array) {</td></tr><tr><td class="line-number" value="342"></td><td class="line-content">        v.array[0] = v.x;</td></tr><tr><td class="line-number" value="343"></td><td class="line-content">        v.array[1] = v.y;</td></tr><tr><td class="line-number" value="344"></td><td class="line-content">        v.array[2] = v.z;</td></tr><tr><td class="line-number" value="345"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="346"></td><td class="line-content">    else {</td></tr><tr><td class="line-number" value="347"></td><td class="line-content">        v.array = new Float32Array([v.x, v.y, v.z]);</td></tr><tr><td class="line-number" value="348"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="349"></td><td class="line-content">    return v.array;</td></tr><tr><td class="line-number" value="350"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="351"></td><td class="line-content">Matrix44.createIdentity = function () {</td></tr><tr><td class="line-number" value="352"></td><td class="line-content">    return new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);</td></tr><tr><td class="line-number" value="353"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="354"></td><td class="line-content">Matrix44.loadProjection = function (m, aspect, vdeg, near, far) {</td></tr><tr><td class="line-number" value="355"></td><td class="line-content">    var h = near * Math.tan(vdeg * Math.PI / 180.0 * 0.5) * 2.0;</td></tr><tr><td class="line-number" value="356"></td><td class="line-content">    var w = h * aspect;</td></tr><tr><td class="line-number" value="357"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="358"></td><td class="line-content">    m[0] = 2.0 * near / w;</td></tr><tr><td class="line-number" value="359"></td><td class="line-content">    m[1] = 0.0;</td></tr><tr><td class="line-number" value="360"></td><td class="line-content">    m[2] = 0.0;</td></tr><tr><td class="line-number" value="361"></td><td class="line-content">    m[3] = 0.0;</td></tr><tr><td class="line-number" value="362"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="363"></td><td class="line-content">    m[4] = 0.0;</td></tr><tr><td class="line-number" value="364"></td><td class="line-content">    m[5] = 2.0 * near / h;</td></tr><tr><td class="line-number" value="365"></td><td class="line-content">    m[6] = 0.0;</td></tr><tr><td class="line-number" value="366"></td><td class="line-content">    m[7] = 0.0;</td></tr><tr><td class="line-number" value="367"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="368"></td><td class="line-content">    m[8] = 0.0;</td></tr><tr><td class="line-number" value="369"></td><td class="line-content">    m[9] = 0.0;</td></tr><tr><td class="line-number" value="370"></td><td class="line-content">    m[10] = -(far + near) / (far - near);</td></tr><tr><td class="line-number" value="371"></td><td class="line-content">    m[11] = -1.0;</td></tr><tr><td class="line-number" value="372"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="373"></td><td class="line-content">    m[12] = 0.0;</td></tr><tr><td class="line-number" value="374"></td><td class="line-content">    m[13] = 0.0;</td></tr><tr><td class="line-number" value="375"></td><td class="line-content">    m[14] = -2.0 * far * near / (far - near);</td></tr><tr><td class="line-number" value="376"></td><td class="line-content">    m[15] = 0.0;</td></tr><tr><td class="line-number" value="377"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="378"></td><td class="line-content">Matrix44.loadLookAt = function (m, vpos, vlook, vup) {</td></tr><tr><td class="line-number" value="379"></td><td class="line-content">    var frontv = Vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);</td></tr><tr><td class="line-number" value="380"></td><td class="line-content">    Vector3.normalize(frontv);</td></tr><tr><td class="line-number" value="381"></td><td class="line-content">    var sidev = Vector3.create(1.0, 0.0, 0.0);</td></tr><tr><td class="line-number" value="382"></td><td class="line-content">    Vector3.cross(sidev, vup, frontv);</td></tr><tr><td class="line-number" value="383"></td><td class="line-content">    Vector3.normalize(sidev);</td></tr><tr><td class="line-number" value="384"></td><td class="line-content">    var topv = Vector3.create(1.0, 0.0, 0.0);</td></tr><tr><td class="line-number" value="385"></td><td class="line-content">    Vector3.cross(topv, frontv, sidev);</td></tr><tr><td class="line-number" value="386"></td><td class="line-content">    Vector3.normalize(topv);</td></tr><tr><td class="line-number" value="387"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="388"></td><td class="line-content">    m[0] = sidev.x;</td></tr><tr><td class="line-number" value="389"></td><td class="line-content">    m[1] = topv.x;</td></tr><tr><td class="line-number" value="390"></td><td class="line-content">    m[2] = frontv.x;</td></tr><tr><td class="line-number" value="391"></td><td class="line-content">    m[3] = 0.0;</td></tr><tr><td class="line-number" value="392"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="393"></td><td class="line-content">    m[4] = sidev.y;</td></tr><tr><td class="line-number" value="394"></td><td class="line-content">    m[5] = topv.y;</td></tr><tr><td class="line-number" value="395"></td><td class="line-content">    m[6] = frontv.y;</td></tr><tr><td class="line-number" value="396"></td><td class="line-content">    m[7] = 0.0;</td></tr><tr><td class="line-number" value="397"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="398"></td><td class="line-content">    m[8] = sidev.z;</td></tr><tr><td class="line-number" value="399"></td><td class="line-content">    m[9] = topv.z;</td></tr><tr><td class="line-number" value="400"></td><td class="line-content">    m[10] = frontv.z;</td></tr><tr><td class="line-number" value="401"></td><td class="line-content">    m[11] = 0.0;</td></tr><tr><td class="line-number" value="402"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="403"></td><td class="line-content">    m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);</td></tr><tr><td class="line-number" value="404"></td><td class="line-content">    m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);</td></tr><tr><td class="line-number" value="405"></td><td class="line-content">    m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);</td></tr><tr><td class="line-number" value="406"></td><td class="line-content">    m[15] = 1.0;</td></tr><tr><td class="line-number" value="407"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="408"></td><td class="line-content"></td></tr><tr><td class="line-number" value="409"></td><td class="line-content">//</td></tr><tr><td class="line-number" value="410"></td><td class="line-content">var timeInfo = {</td></tr><tr><td class="line-number" value="411"></td><td class="line-content">    'start':0, 'prev':0, // Date</td></tr><tr><td class="line-number" value="412"></td><td class="line-content">    'delta':0, 'elapsed':0 // Number(sec)</td></tr><tr><td class="line-number" value="413"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="414"></td><td class="line-content"></td></tr><tr><td class="line-number" value="415"></td><td class="line-content">//</td></tr><tr><td class="line-number" value="416"></td><td class="line-content">var gl;</td></tr><tr><td class="line-number" value="417"></td><td class="line-content">var renderSpec = {</td></tr><tr><td class="line-number" value="418"></td><td class="line-content">    'width':0,</td></tr><tr><td class="line-number" value="419"></td><td class="line-content">    'height':0,</td></tr><tr><td class="line-number" value="420"></td><td class="line-content">    'aspect':1,</td></tr><tr><td class="line-number" value="421"></td><td class="line-content">    'array':new Float32Array(3),</td></tr><tr><td class="line-number" value="422"></td><td class="line-content">    'halfWidth':0,</td></tr><tr><td class="line-number" value="423"></td><td class="line-content">    'halfHeight':0,</td></tr><tr><td class="line-number" value="424"></td><td class="line-content">    'halfArray':new Float32Array(3)</td></tr><tr><td class="line-number" value="425"></td><td class="line-content">    // and some render targets. see setViewport()</td></tr><tr><td class="line-number" value="426"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="427"></td><td class="line-content">renderSpec.setSize = function(w, h) {</td></tr><tr><td class="line-number" value="428"></td><td class="line-content">    renderSpec.width = w;</td></tr><tr><td class="line-number" value="429"></td><td class="line-content">    renderSpec.height = h;</td></tr><tr><td class="line-number" value="430"></td><td class="line-content">    renderSpec.aspect = renderSpec.width / renderSpec.height;</td></tr><tr><td class="line-number" value="431"></td><td class="line-content">    renderSpec.array[0] = renderSpec.width;</td></tr><tr><td class="line-number" value="432"></td><td class="line-content">    renderSpec.array[1] = renderSpec.height;</td></tr><tr><td class="line-number" value="433"></td><td class="line-content">    renderSpec.array[2] = renderSpec.aspect;</td></tr><tr><td class="line-number" value="434"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="435"></td><td class="line-content">    renderSpec.halfWidth = Math.floor(w / 2);</td></tr><tr><td class="line-number" value="436"></td><td class="line-content">    renderSpec.halfHeight = Math.floor(h / 2);</td></tr><tr><td class="line-number" value="437"></td><td class="line-content">    renderSpec.halfArray[0] = renderSpec.halfWidth;</td></tr><tr><td class="line-number" value="438"></td><td class="line-content">    renderSpec.halfArray[1] = renderSpec.halfHeight;</td></tr><tr><td class="line-number" value="439"></td><td class="line-content">    renderSpec.halfArray[2] = renderSpec.halfWidth / renderSpec.halfHeight;</td></tr><tr><td class="line-number" value="440"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="441"></td><td class="line-content"></td></tr><tr><td class="line-number" value="442"></td><td class="line-content">function deleteRenderTarget(rt) {</td></tr><tr><td class="line-number" value="443"></td><td class="line-content">    gl.deleteFramebuffer(rt.frameBuffer);</td></tr><tr><td class="line-number" value="444"></td><td class="line-content">    gl.deleteRenderbuffer(rt.renderBuffer);</td></tr><tr><td class="line-number" value="445"></td><td class="line-content">    gl.deleteTexture(rt.texture);</td></tr><tr><td class="line-number" value="446"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="447"></td><td class="line-content"></td></tr><tr><td class="line-number" value="448"></td><td class="line-content">function createRenderTarget(w, h) {</td></tr><tr><td class="line-number" value="449"></td><td class="line-content">    var ret = {</td></tr><tr><td class="line-number" value="450"></td><td class="line-content">        'width':w,</td></tr><tr><td class="line-number" value="451"></td><td class="line-content">        'height':h,</td></tr><tr><td class="line-number" value="452"></td><td class="line-content">        'sizeArray':new Float32Array([w, h, w / h]),</td></tr><tr><td class="line-number" value="453"></td><td class="line-content">        'dtxArray':new Float32Array([1.0 / w, 1.0 / h])</td></tr><tr><td class="line-number" value="454"></td><td class="line-content">    };</td></tr><tr><td class="line-number" value="455"></td><td class="line-content">    ret.frameBuffer = gl.createFramebuffer();</td></tr><tr><td class="line-number" value="456"></td><td class="line-content">    ret.renderBuffer = gl.createRenderbuffer();</td></tr><tr><td class="line-number" value="457"></td><td class="line-content">    ret.texture = gl.createTexture();</td></tr><tr><td class="line-number" value="458"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="459"></td><td class="line-content">    gl.bindTexture(gl.TEXTURE_2D, ret.texture);</td></tr><tr><td class="line-number" value="460"></td><td class="line-content">    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);</td></tr><tr><td class="line-number" value="461"></td><td class="line-content">    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);</td></tr><tr><td class="line-number" value="462"></td><td class="line-content">    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</td></tr><tr><td class="line-number" value="463"></td><td class="line-content">    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);</td></tr><tr><td class="line-number" value="464"></td><td class="line-content">    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);</td></tr><tr><td class="line-number" value="465"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="466"></td><td class="line-content">    gl.bindFramebuffer(gl.FRAMEBUFFER, ret.frameBuffer);</td></tr><tr><td class="line-number" value="467"></td><td class="line-content">    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, ret.texture, 0);</td></tr><tr><td class="line-number" value="468"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="469"></td><td class="line-content">    gl.bindRenderbuffer(gl.RENDERBUFFER, ret.renderBuffer);</td></tr><tr><td class="line-number" value="470"></td><td class="line-content">    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);</td></tr><tr><td class="line-number" value="471"></td><td class="line-content">    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, ret.renderBuffer);</td></tr><tr><td class="line-number" value="472"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="473"></td><td class="line-content">    gl.bindTexture(gl.TEXTURE_2D, null);</td></tr><tr><td class="line-number" value="474"></td><td class="line-content">    gl.bindRenderbuffer(gl.RENDERBUFFER, null);</td></tr><tr><td class="line-number" value="475"></td><td class="line-content">    gl.bindFramebuffer(gl.FRAMEBUFFER, null);</td></tr><tr><td class="line-number" value="476"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="477"></td><td class="line-content">    return ret;</td></tr><tr><td class="line-number" value="478"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="479"></td><td class="line-content"></td></tr><tr><td class="line-number" value="480"></td><td class="line-content">function compileShader(shtype, shsrc) {</td></tr><tr><td class="line-number" value="481"></td><td class="line-content">	var retsh = gl.createShader(shtype);</td></tr><tr><td class="line-number" value="482"></td><td class="line-content">	</td></tr><tr><td class="line-number" value="483"></td><td class="line-content">	gl.shaderSource(retsh, shsrc);</td></tr><tr><td class="line-number" value="484"></td><td class="line-content">	gl.compileShader(retsh);</td></tr><tr><td class="line-number" value="485"></td><td class="line-content">	</td></tr><tr><td class="line-number" value="486"></td><td class="line-content">	if(!gl.getShaderParameter(retsh, gl.COMPILE_STATUS)) {</td></tr><tr><td class="line-number" value="487"></td><td class="line-content">		var errlog = gl.getShaderInfoLog(retsh);</td></tr><tr><td class="line-number" value="488"></td><td class="line-content">		gl.deleteShader(retsh);</td></tr><tr><td class="line-number" value="489"></td><td class="line-content">		console.error(errlog);</td></tr><tr><td class="line-number" value="490"></td><td class="line-content">		return null;</td></tr><tr><td class="line-number" value="491"></td><td class="line-content">	}</td></tr><tr><td class="line-number" value="492"></td><td class="line-content">	return retsh;</td></tr><tr><td class="line-number" value="493"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="494"></td><td class="line-content"></td></tr><tr><td class="line-number" value="495"></td><td class="line-content">function createShader(vtxsrc, frgsrc, uniformlist, attrlist) {</td></tr><tr><td class="line-number" value="496"></td><td class="line-content">    var vsh = compileShader(gl.VERTEX_SHADER, vtxsrc);</td></tr><tr><td class="line-number" value="497"></td><td class="line-content">    var fsh = compileShader(gl.FRAGMENT_SHADER, frgsrc);</td></tr><tr><td class="line-number" value="498"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="499"></td><td class="line-content">    if(vsh == null || fsh == null) {</td></tr><tr><td class="line-number" value="500"></td><td class="line-content">        return null;</td></tr><tr><td class="line-number" value="501"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="502"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="503"></td><td class="line-content">    var prog = gl.createProgram();</td></tr><tr><td class="line-number" value="504"></td><td class="line-content">    gl.attachShader(prog, vsh);</td></tr><tr><td class="line-number" value="505"></td><td class="line-content">    gl.attachShader(prog, fsh);</td></tr><tr><td class="line-number" value="506"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="507"></td><td class="line-content">    gl.deleteShader(vsh);</td></tr><tr><td class="line-number" value="508"></td><td class="line-content">    gl.deleteShader(fsh);</td></tr><tr><td class="line-number" value="509"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="510"></td><td class="line-content">    gl.linkProgram(prog);</td></tr><tr><td class="line-number" value="511"></td><td class="line-content">    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {</td></tr><tr><td class="line-number" value="512"></td><td class="line-content">        var errlog = gl.getProgramInfoLog(prog);</td></tr><tr><td class="line-number" value="513"></td><td class="line-content">        console.error(errlog);</td></tr><tr><td class="line-number" value="514"></td><td class="line-content">        return null;</td></tr><tr><td class="line-number" value="515"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="516"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="517"></td><td class="line-content">    if(uniformlist) {</td></tr><tr><td class="line-number" value="518"></td><td class="line-content">        prog.uniforms = {};</td></tr><tr><td class="line-number" value="519"></td><td class="line-content">        for(var i = 0; i &lt; uniformlist.length; i++) {</td></tr><tr><td class="line-number" value="520"></td><td class="line-content">            prog.uniforms[uniformlist[i]] = gl.getUniformLocation(prog, uniformlist[i]);</td></tr><tr><td class="line-number" value="521"></td><td class="line-content">        }</td></tr><tr><td class="line-number" value="522"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="523"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="524"></td><td class="line-content">    if(attrlist) {</td></tr><tr><td class="line-number" value="525"></td><td class="line-content">        prog.attributes = {};</td></tr><tr><td class="line-number" value="526"></td><td class="line-content">        for(var i = 0; i &lt; attrlist.length; i++) {</td></tr><tr><td class="line-number" value="527"></td><td class="line-content">            var attr = attrlist[i];</td></tr><tr><td class="line-number" value="528"></td><td class="line-content">            prog.attributes[attr] = gl.getAttribLocation(prog, attr);</td></tr><tr><td class="line-number" value="529"></td><td class="line-content">        }</td></tr><tr><td class="line-number" value="530"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="531"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="532"></td><td class="line-content">    return prog;</td></tr><tr><td class="line-number" value="533"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="534"></td><td class="line-content"></td></tr><tr><td class="line-number" value="535"></td><td class="line-content">function useShader(prog) {</td></tr><tr><td class="line-number" value="536"></td><td class="line-content">    gl.useProgram(prog);</td></tr><tr><td class="line-number" value="537"></td><td class="line-content">    for(var attr in prog.attributes) {</td></tr><tr><td class="line-number" value="538"></td><td class="line-content">        gl.enableVertexAttribArray(prog.attributes[attr]);;</td></tr><tr><td class="line-number" value="539"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="540"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="541"></td><td class="line-content"></td></tr><tr><td class="line-number" value="542"></td><td class="line-content">function unuseShader(prog) {</td></tr><tr><td class="line-number" value="543"></td><td class="line-content">    for(var attr in prog.attributes) {</td></tr><tr><td class="line-number" value="544"></td><td class="line-content">        gl.disableVertexAttribArray(prog.attributes[attr]);;</td></tr><tr><td class="line-number" value="545"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="546"></td><td class="line-content">    gl.useProgram(null);</td></tr><tr><td class="line-number" value="547"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="548"></td><td class="line-content"></td></tr><tr><td class="line-number" value="549"></td><td class="line-content">/////</td></tr><tr><td class="line-number" value="550"></td><td class="line-content">var projection = {</td></tr><tr><td class="line-number" value="551"></td><td class="line-content">    'angle':60,</td></tr><tr><td class="line-number" value="552"></td><td class="line-content">    'nearfar':new Float32Array([0.1, 100.0]),</td></tr><tr><td class="line-number" value="553"></td><td class="line-content">    'matrix':Matrix44.createIdentity()</td></tr><tr><td class="line-number" value="554"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="555"></td><td class="line-content">var camera = {</td></tr><tr><td class="line-number" value="556"></td><td class="line-content">    'position':Vector3.create(0, 0, 100),</td></tr><tr><td class="line-number" value="557"></td><td class="line-content">    'lookat':Vector3.create(0, 0, 0),</td></tr><tr><td class="line-number" value="558"></td><td class="line-content">    'up':Vector3.create(0, 1, 0),</td></tr><tr><td class="line-number" value="559"></td><td class="line-content">    'dof':Vector3.create(10.0, 4.0, 8.0),</td></tr><tr><td class="line-number" value="560"></td><td class="line-content">    'matrix':Matrix44.createIdentity()</td></tr><tr><td class="line-number" value="561"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="562"></td><td class="line-content"></td></tr><tr><td class="line-number" value="563"></td><td class="line-content">var pointFlower = {};</td></tr><tr><td class="line-number" value="564"></td><td class="line-content">var meshFlower = {};</td></tr><tr><td class="line-number" value="565"></td><td class="line-content">var sceneStandBy = false;</td></tr><tr><td class="line-number" value="566"></td><td class="line-content"></td></tr><tr><td class="line-number" value="567"></td><td class="line-content">var BlossomParticle = function () {</td></tr><tr><td class="line-number" value="568"></td><td class="line-content">    this.velocity = new Array(3);</td></tr><tr><td class="line-number" value="569"></td><td class="line-content">    this.rotation = new Array(3);</td></tr><tr><td class="line-number" value="570"></td><td class="line-content">    this.position = new Array(3);</td></tr><tr><td class="line-number" value="571"></td><td class="line-content">    this.euler = new Array(3);</td></tr><tr><td class="line-number" value="572"></td><td class="line-content">    this.size = 1.0;</td></tr><tr><td class="line-number" value="573"></td><td class="line-content">    this.alpha = 1.0;</td></tr><tr><td class="line-number" value="574"></td><td class="line-content">    this.zkey = 0.0;</td></tr><tr><td class="line-number" value="575"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="576"></td><td class="line-content"></td></tr><tr><td class="line-number" value="577"></td><td class="line-content">BlossomParticle.prototype.setVelocity = function (vx, vy, vz) {</td></tr><tr><td class="line-number" value="578"></td><td class="line-content">    this.velocity[0] = vx;</td></tr><tr><td class="line-number" value="579"></td><td class="line-content">    this.velocity[1] = vy;</td></tr><tr><td class="line-number" value="580"></td><td class="line-content">    this.velocity[2] = vz;</td></tr><tr><td class="line-number" value="581"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="582"></td><td class="line-content"></td></tr><tr><td class="line-number" value="583"></td><td class="line-content">BlossomParticle.prototype.setRotation = function (rx, ry, rz) {</td></tr><tr><td class="line-number" value="584"></td><td class="line-content">    this.rotation[0] = rx;</td></tr><tr><td class="line-number" value="585"></td><td class="line-content">    this.rotation[1] = ry;</td></tr><tr><td class="line-number" value="586"></td><td class="line-content">    this.rotation[2] = rz;</td></tr><tr><td class="line-number" value="587"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="588"></td><td class="line-content"></td></tr><tr><td class="line-number" value="589"></td><td class="line-content">BlossomParticle.prototype.setPosition = function (nx, ny, nz) {</td></tr><tr><td class="line-number" value="590"></td><td class="line-content">    this.position[0] = nx;</td></tr><tr><td class="line-number" value="591"></td><td class="line-content">    this.position[1] = ny;</td></tr><tr><td class="line-number" value="592"></td><td class="line-content">    this.position[2] = nz;</td></tr><tr><td class="line-number" value="593"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="594"></td><td class="line-content"></td></tr><tr><td class="line-number" value="595"></td><td class="line-content">BlossomParticle.prototype.setEulerAngles = function (rx, ry, rz) {</td></tr><tr><td class="line-number" value="596"></td><td class="line-content">    this.euler[0] = rx;</td></tr><tr><td class="line-number" value="597"></td><td class="line-content">    this.euler[1] = ry;</td></tr><tr><td class="line-number" value="598"></td><td class="line-content">    this.euler[2] = rz;</td></tr><tr><td class="line-number" value="599"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="600"></td><td class="line-content"></td></tr><tr><td class="line-number" value="601"></td><td class="line-content">BlossomParticle.prototype.setSize = function (s) {</td></tr><tr><td class="line-number" value="602"></td><td class="line-content">    this.size = s;</td></tr><tr><td class="line-number" value="603"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="604"></td><td class="line-content"></td></tr><tr><td class="line-number" value="605"></td><td class="line-content">BlossomParticle.prototype.update = function (dt, et) {</td></tr><tr><td class="line-number" value="606"></td><td class="line-content">    this.position[0] += this.velocity[0] * dt;</td></tr><tr><td class="line-number" value="607"></td><td class="line-content">    this.position[1] += this.velocity[1] * dt;</td></tr><tr><td class="line-number" value="608"></td><td class="line-content">    this.position[2] += this.velocity[2] * dt;</td></tr><tr><td class="line-number" value="609"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="610"></td><td class="line-content">    this.euler[0] += this.rotation[0] * dt;</td></tr><tr><td class="line-number" value="611"></td><td class="line-content">    this.euler[1] += this.rotation[1] * dt;</td></tr><tr><td class="line-number" value="612"></td><td class="line-content">    this.euler[2] += this.rotation[2] * dt;</td></tr><tr><td class="line-number" value="613"></td><td class="line-content">};</td></tr><tr><td class="line-number" value="614"></td><td class="line-content"></td></tr><tr><td class="line-number" value="615"></td><td class="line-content">function createPointFlowers() {</td></tr><tr><td class="line-number" value="616"></td><td class="line-content">    // get point sizes</td></tr><tr><td class="line-number" value="617"></td><td class="line-content">    var prm = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);</td></tr><tr><td class="line-number" value="618"></td><td class="line-content">    renderSpec.pointSize = {'min':prm[0], 'max':prm[1]};</td></tr><tr><td class="line-number" value="619"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="620"></td><td class="line-content">    var vtxsrc = document.getElementById("sakura_point_vsh").textContent;</td></tr><tr><td class="line-number" value="621"></td><td class="line-content">    var frgsrc = document.getElementById("sakura_point_fsh").textContent;</td></tr><tr><td class="line-number" value="622"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="623"></td><td class="line-content">    pointFlower.program = createShader(</td></tr><tr><td class="line-number" value="624"></td><td class="line-content">        vtxsrc, frgsrc,</td></tr><tr><td class="line-number" value="625"></td><td class="line-content">        ['uProjection', 'uModelview', 'uResolution', 'uOffset', 'uDOF', 'uFade'],</td></tr><tr><td class="line-number" value="626"></td><td class="line-content">        ['aPosition', 'aEuler', 'aMisc']</td></tr><tr><td class="line-number" value="627"></td><td class="line-content">    );</td></tr><tr><td class="line-number" value="628"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="629"></td><td class="line-content">    useShader(pointFlower.program);</td></tr><tr><td class="line-number" value="630"></td><td class="line-content">    pointFlower.offset = new Float32Array([0.0, 0.0, 0.0]);</td></tr><tr><td class="line-number" value="631"></td><td class="line-content">    pointFlower.fader = Vector3.create(0.0, 10.0, 0.0);</td></tr><tr><td class="line-number" value="632"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="633"></td><td class="line-content">    // paramerters: velocity[3], rotate[3]</td></tr><tr><td class="line-number" value="634"></td><td class="line-content">    pointFlower.numFlowers = 1600;</td></tr><tr><td class="line-number" value="635"></td><td class="line-content">    pointFlower.particles = new Array(pointFlower.numFlowers);</td></tr><tr><td class="line-number" value="636"></td><td class="line-content">    // vertex attributes {position[3], euler_xyz[3], size[1]}</td></tr><tr><td class="line-number" value="637"></td><td class="line-content">    pointFlower.dataArray = new Float32Array(pointFlower.numFlowers * (3 + 3 + 2));</td></tr><tr><td class="line-number" value="638"></td><td class="line-content">    pointFlower.positionArrayOffset = 0;</td></tr><tr><td class="line-number" value="639"></td><td class="line-content">    pointFlower.eulerArrayOffset = pointFlower.numFlowers * 3;</td></tr><tr><td class="line-number" value="640"></td><td class="line-content">    pointFlower.miscArrayOffset = pointFlower.numFlowers * 6;</td></tr><tr><td class="line-number" value="641"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="642"></td><td class="line-content">    pointFlower.buffer = gl.createBuffer();</td></tr><tr><td class="line-number" value="643"></td><td class="line-content">    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);</td></tr><tr><td class="line-number" value="644"></td><td class="line-content">    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);</td></tr><tr><td class="line-number" value="645"></td><td class="line-content">    gl.bindBuffer(gl.ARRAY_BUFFER, null);</td></tr><tr><td class="line-number" value="646"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="647"></td><td class="line-content">    unuseShader(pointFlower.program);</td></tr><tr><td class="line-number" value="648"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="649"></td><td class="line-content">    for(var i = 0; i &lt; pointFlower.numFlowers; i++) {</td></tr><tr><td class="line-number" value="650"></td><td class="line-content">        pointFlower.particles[i] = new BlossomParticle();</td></tr><tr><td class="line-number" value="651"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="652"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="653"></td><td class="line-content"></td></tr><tr><td class="line-number" value="654"></td><td class="line-content">function initPointFlowers() {</td></tr><tr><td class="line-number" value="655"></td><td class="line-content">    //area</td></tr><tr><td class="line-number" value="656"></td><td class="line-content">    pointFlower.area = Vector3.create(20.0, 20.0, 20.0);</td></tr><tr><td class="line-number" value="657"></td><td class="line-content">    pointFlower.area.x = pointFlower.area.y * renderSpec.aspect;</td></tr><tr><td class="line-number" value="658"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="659"></td><td class="line-content">    pointFlower.fader.x = 10.0; //env fade start</td></tr><tr><td class="line-number" value="660"></td><td class="line-content">    pointFlower.fader.y = pointFlower.area.z; //env fade half</td></tr><tr><td class="line-number" value="661"></td><td class="line-content">    pointFlower.fader.z = 0.1;  //near fade start</td></tr><tr><td class="line-number" value="662"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="663"></td><td class="line-content">    //particles</td></tr><tr><td class="line-number" value="664"></td><td class="line-content">    var PI2 = Math.PI * 2.0;</td></tr><tr><td class="line-number" value="665"></td><td class="line-content">    var tmpv3 = Vector3.create(0, 0, 0);</td></tr><tr><td class="line-number" value="666"></td><td class="line-content">    var tmpv = 0;</td></tr><tr><td class="line-number" value="667"></td><td class="line-content">    var symmetryrand = function() {return (Math.random() * 2.0 - 1.0);};</td></tr><tr><td class="line-number" value="668"></td><td class="line-content">    for(var i = 0; i &lt; pointFlower.numFlowers; i++) {</td></tr><tr><td class="line-number" value="669"></td><td class="line-content">        var tmpprtcl = pointFlower.particles[i];</td></tr><tr><td class="line-number" value="670"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="671"></td><td class="line-content">        //velocity</td></tr><tr><td class="line-number" value="672"></td><td class="line-content">        tmpv3.x = symmetryrand() * 0.3 + 0.8;</td></tr><tr><td class="line-number" value="673"></td><td class="line-content">        tmpv3.y = symmetryrand() * 0.2 - 1.0;</td></tr><tr><td class="line-number" value="674"></td><td class="line-content">        tmpv3.z = symmetryrand() * 0.3 + 0.5;</td></tr><tr><td class="line-number" value="675"></td><td class="line-content">        Vector3.normalize(tmpv3);</td></tr><tr><td class="line-number" value="676"></td><td class="line-content">        tmpv = 2.0 + Math.random() * 1.0;</td></tr><tr><td class="line-number" value="677"></td><td class="line-content">        tmpprtcl.setVelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);</td></tr><tr><td class="line-number" value="678"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="679"></td><td class="line-content">        //rotation</td></tr><tr><td class="line-number" value="680"></td><td class="line-content">        tmpprtcl.setRotation(</td></tr><tr><td class="line-number" value="681"></td><td class="line-content">            symmetryrand() * PI2 * 0.5,</td></tr><tr><td class="line-number" value="682"></td><td class="line-content">            symmetryrand() * PI2 * 0.5,</td></tr><tr><td class="line-number" value="683"></td><td class="line-content">            symmetryrand() * PI2 * 0.5</td></tr><tr><td class="line-number" value="684"></td><td class="line-content">        );</td></tr><tr><td class="line-number" value="685"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="686"></td><td class="line-content">        //position</td></tr><tr><td class="line-number" value="687"></td><td class="line-content">        tmpprtcl.setPosition(</td></tr><tr><td class="line-number" value="688"></td><td class="line-content">            symmetryrand() * pointFlower.area.x,</td></tr><tr><td class="line-number" value="689"></td><td class="line-content">            symmetryrand() * pointFlower.area.y,</td></tr><tr><td class="line-number" value="690"></td><td class="line-content">            symmetryrand() * pointFlower.area.z</td></tr><tr><td class="line-number" value="691"></td><td class="line-content">        );</td></tr><tr><td class="line-number" value="692"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="693"></td><td class="line-content">        //euler</td></tr><tr><td class="line-number" value="694"></td><td class="line-content">        tmpprtcl.setEulerAngles(</td></tr><tr><td class="line-number" value="695"></td><td class="line-content">            Math.random() * Math.PI * 2.0,</td></tr><tr><td class="line-number" value="696"></td><td class="line-content">            Math.random() * Math.PI * 2.0,</td></tr><tr><td class="line-number" value="697"></td><td class="line-content">            Math.random() * Math.PI * 2.0</td></tr><tr><td class="line-number" value="698"></td><td class="line-content">        );</td></tr><tr><td class="line-number" value="699"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="700"></td><td class="line-content">        //size</td></tr><tr><td class="line-number" value="701"></td><td class="line-content">        tmpprtcl.setSize(0.9 + Math.random() * 0.1);</td></tr><tr><td class="line-number" value="702"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="703"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="704"></td><td class="line-content"></td></tr><tr><td class="line-number" value="705"></td><td class="line-content">function renderPointFlowers() {</td></tr><tr><td class="line-number" value="706"></td><td class="line-content">    //update</td></tr><tr><td class="line-number" value="707"></td><td class="line-content">    var PI2 = Math.PI * 2.0;</td></tr><tr><td class="line-number" value="708"></td><td class="line-content">    var limit = [pointFlower.area.x, pointFlower.area.y, pointFlower.area.z];</td></tr><tr><td class="line-number" value="709"></td><td class="line-content">    var repeatPos = function (prt, cmp, limit) {</td></tr><tr><td class="line-number" value="710"></td><td class="line-content">        if(Math.abs(prt.position[cmp]) - prt.size * 0.5 &gt; limit) {</td></tr><tr><td class="line-number" value="711"></td><td class="line-content">            //out of area</td></tr><tr><td class="line-number" value="712"></td><td class="line-content">            if(prt.position[cmp] &gt; 0) {</td></tr><tr><td class="line-number" value="713"></td><td class="line-content">                prt.position[cmp] -= limit * 2.0;</td></tr><tr><td class="line-number" value="714"></td><td class="line-content">            }</td></tr><tr><td class="line-number" value="715"></td><td class="line-content">            else {</td></tr><tr><td class="line-number" value="716"></td><td class="line-content">                prt.position[cmp] += limit * 2.0;</td></tr><tr><td class="line-number" value="717"></td><td class="line-content">            }</td></tr><tr><td class="line-number" value="718"></td><td class="line-content">        }</td></tr><tr><td class="line-number" value="719"></td><td class="line-content">    };</td></tr><tr><td class="line-number" value="720"></td><td class="line-content">    var repeatEuler = function (prt, cmp) {</td></tr><tr><td class="line-number" value="721"></td><td class="line-content">        prt.euler[cmp] = prt.euler[cmp] % PI2;</td></tr><tr><td class="line-number" value="722"></td><td class="line-content">        if(prt.euler[cmp] &lt; 0.0) {</td></tr><tr><td class="line-number" value="723"></td><td class="line-content">            prt.euler[cmp] += PI2;</td></tr><tr><td class="line-number" value="724"></td><td class="line-content">        }</td></tr><tr><td class="line-number" value="725"></td><td class="line-content">    };</td></tr><tr><td class="line-number" value="726"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="727"></td><td class="line-content">    for(var i = 0; i &lt; pointFlower.numFlowers; i++) {</td></tr><tr><td class="line-number" value="728"></td><td class="line-content">        var prtcl = pointFlower.particles[i];</td></tr><tr><td class="line-number" value="729"></td><td class="line-content">        prtcl.update(timeInfo.delta, timeInfo.elapsed);</td></tr><tr><td class="line-number" value="730"></td><td class="line-content">        repeatPos(prtcl, 0, pointFlower.area.x);</td></tr><tr><td class="line-number" value="731"></td><td class="line-content">        repeatPos(prtcl, 1, pointFlower.area.y);</td></tr><tr><td class="line-number" value="732"></td><td class="line-content">        repeatPos(prtcl, 2, pointFlower.area.z);</td></tr><tr><td class="line-number" value="733"></td><td class="line-content">        repeatEuler(prtcl, 0);</td></tr><tr><td class="line-number" value="734"></td><td class="line-content">        repeatEuler(prtcl, 1);</td></tr><tr><td class="line-number" value="735"></td><td class="line-content">        repeatEuler(prtcl, 2);</td></tr><tr><td class="line-number" value="736"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="737"></td><td class="line-content">        prtcl.alpha = 1.0;//(pointFlower.area.z - prtcl.position[2]) * 0.5;</td></tr><tr><td class="line-number" value="738"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="739"></td><td class="line-content">        prtcl.zkey = (camera.matrix[2] * prtcl.position[0]</td></tr><tr><td class="line-number" value="740"></td><td class="line-content">                    + camera.matrix[6] * prtcl.position[1]</td></tr><tr><td class="line-number" value="741"></td><td class="line-content">                    + camera.matrix[10] * prtcl.position[2]</td></tr><tr><td class="line-number" value="742"></td><td class="line-content">                    + camera.matrix[14]);</td></tr><tr><td class="line-number" value="743"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="744"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="745"></td><td class="line-content">    // sort</td></tr><tr><td class="line-number" value="746"></td><td class="line-content">    pointFlower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});</td></tr><tr><td class="line-number" value="747"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="748"></td><td class="line-content">    // update data</td></tr><tr><td class="line-number" value="749"></td><td class="line-content">    var ipos = pointFlower.positionArrayOffset;</td></tr><tr><td class="line-number" value="750"></td><td class="line-content">    var ieuler = pointFlower.eulerArrayOffset;</td></tr><tr><td class="line-number" value="751"></td><td class="line-content">    var imisc = pointFlower.miscArrayOffset;</td></tr><tr><td class="line-number" value="752"></td><td class="line-content">    for(var i = 0; i &lt; pointFlower.numFlowers; i++) {</td></tr><tr><td class="line-number" value="753"></td><td class="line-content">        var prtcl = pointFlower.particles[i];</td></tr><tr><td class="line-number" value="754"></td><td class="line-content">        pointFlower.dataArray[ipos] = prtcl.position[0];</td></tr><tr><td class="line-number" value="755"></td><td class="line-content">        pointFlower.dataArray[ipos + 1] = prtcl.position[1];</td></tr><tr><td class="line-number" value="756"></td><td class="line-content">        pointFlower.dataArray[ipos + 2] = prtcl.position[2];</td></tr><tr><td class="line-number" value="757"></td><td class="line-content">        ipos += 3;</td></tr><tr><td class="line-number" value="758"></td><td class="line-content">        pointFlower.dataArray[ieuler] = prtcl.euler[0];</td></tr><tr><td class="line-number" value="759"></td><td class="line-content">        pointFlower.dataArray[ieuler + 1] = prtcl.euler[1];</td></tr><tr><td class="line-number" value="760"></td><td class="line-content">        pointFlower.dataArray[ieuler + 2] = prtcl.euler[2];</td></tr><tr><td class="line-number" value="761"></td><td class="line-content">        ieuler += 3;</td></tr><tr><td class="line-number" value="762"></td><td class="line-content">        pointFlower.dataArray[imisc] = prtcl.size;</td></tr><tr><td class="line-number" value="763"></td><td class="line-content">        pointFlower.dataArray[imisc + 1] = prtcl.alpha;</td></tr><tr><td class="line-number" value="764"></td><td class="line-content">        imisc += 2;</td></tr><tr><td class="line-number" value="765"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="766"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="767"></td><td class="line-content">    //draw</td></tr><tr><td class="line-number" value="768"></td><td class="line-content">    gl.enable(gl.BLEND);</td></tr><tr><td class="line-number" value="769"></td><td class="line-content">    //gl.disable(gl.DEPTH_TEST);</td></tr><tr><td class="line-number" value="770"></td><td class="line-content">    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);</td></tr><tr><td class="line-number" value="771"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="772"></td><td class="line-content">    var prog = pointFlower.program;</td></tr><tr><td class="line-number" value="773"></td><td class="line-content">    useShader(prog);</td></tr><tr><td class="line-number" value="774"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="775"></td><td class="line-content">    gl.uniformMatrix4fv(prog.uniforms.uProjection, false, projection.matrix);</td></tr><tr><td class="line-number" value="776"></td><td class="line-content">    gl.uniformMatrix4fv(prog.uniforms.uModelview, false, camera.matrix);</td></tr><tr><td class="line-number" value="777"></td><td class="line-content">    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);</td></tr><tr><td class="line-number" value="778"></td><td class="line-content">    gl.uniform3fv(prog.uniforms.uDOF, Vector3.arrayForm(camera.dof));</td></tr><tr><td class="line-number" value="779"></td><td class="line-content">    gl.uniform3fv(prog.uniforms.uFade, Vector3.arrayForm(pointFlower.fader));</td></tr><tr><td class="line-number" value="780"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="781"></td><td class="line-content">    gl.bindBuffer(gl.ARRAY_BUFFER, pointFlower.buffer);</td></tr><tr><td class="line-number" value="782"></td><td class="line-content">    gl.bufferData(gl.ARRAY_BUFFER, pointFlower.dataArray, gl.DYNAMIC_DRAW);</td></tr><tr><td class="line-number" value="783"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="784"></td><td class="line-content">    gl.vertexAttribPointer(prog.attributes.aPosition, 3, gl.FLOAT, false, 0, pointFlower.positionArrayOffset * Float32Array.BYTES_PER_ELEMENT);</td></tr><tr><td class="line-number" value="785"></td><td class="line-content">    gl.vertexAttribPointer(prog.attributes.aEuler, 3, gl.FLOAT, false, 0, pointFlower.eulerArrayOffset * Float32Array.BYTES_PER_ELEMENT);</td></tr><tr><td class="line-number" value="786"></td><td class="line-content">    gl.vertexAttribPointer(prog.attributes.aMisc, 2, gl.FLOAT, false, 0, pointFlower.miscArrayOffset * Float32Array.BYTES_PER_ELEMENT);</td></tr><tr><td class="line-number" value="787"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="788"></td><td class="line-content">    // doubler</td></tr><tr><td class="line-number" value="789"></td><td class="line-content">    for(var i = 1; i &lt; 2; i++) {</td></tr><tr><td class="line-number" value="790"></td><td class="line-content">        var zpos = i * -2.0;</td></tr><tr><td class="line-number" value="791"></td><td class="line-content">        pointFlower.offset[0] = pointFlower.area.x * -1.0;</td></tr><tr><td class="line-number" value="792"></td><td class="line-content">        pointFlower.offset[1] = pointFlower.area.y * -1.0;</td></tr><tr><td class="line-number" value="793"></td><td class="line-content">        pointFlower.offset[2] = pointFlower.area.z * zpos;</td></tr><tr><td class="line-number" value="794"></td><td class="line-content">        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);</td></tr><tr><td class="line-number" value="795"></td><td class="line-content">        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);</td></tr><tr><td class="line-number" value="796"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="797"></td><td class="line-content">        pointFlower.offset[0] = pointFlower.area.x * -1.0;</td></tr><tr><td class="line-number" value="798"></td><td class="line-content">        pointFlower.offset[1] = pointFlower.area.y *  1.0;</td></tr><tr><td class="line-number" value="799"></td><td class="line-content">        pointFlower.offset[2] = pointFlower.area.z * zpos;</td></tr><tr><td class="line-number" value="800"></td><td class="line-content">        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);</td></tr><tr><td class="line-number" value="801"></td><td class="line-content">        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);</td></tr><tr><td class="line-number" value="802"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="803"></td><td class="line-content">        pointFlower.offset[0] = pointFlower.area.x *  1.0;</td></tr><tr><td class="line-number" value="804"></td><td class="line-content">        pointFlower.offset[1] = pointFlower.area.y * -1.0;</td></tr><tr><td class="line-number" value="805"></td><td class="line-content">        pointFlower.offset[2] = pointFlower.area.z * zpos;</td></tr><tr><td class="line-number" value="806"></td><td class="line-content">        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);</td></tr><tr><td class="line-number" value="807"></td><td class="line-content">        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);</td></tr><tr><td class="line-number" value="808"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="809"></td><td class="line-content">        pointFlower.offset[0] = pointFlower.area.x *  1.0;</td></tr><tr><td class="line-number" value="810"></td><td class="line-content">        pointFlower.offset[1] = pointFlower.area.y *  1.0;</td></tr><tr><td class="line-number" value="811"></td><td class="line-content">        pointFlower.offset[2] = pointFlower.area.z * zpos;</td></tr><tr><td class="line-number" value="812"></td><td class="line-content">        gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);</td></tr><tr><td class="line-number" value="813"></td><td class="line-content">        gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);</td></tr><tr><td class="line-number" value="814"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="815"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="816"></td><td class="line-content">    //main</td></tr><tr><td class="line-number" value="817"></td><td class="line-content">    pointFlower.offset[0] = 0.0;</td></tr><tr><td class="line-number" value="818"></td><td class="line-content">    pointFlower.offset[1] = 0.0;</td></tr><tr><td class="line-number" value="819"></td><td class="line-content">    pointFlower.offset[2] = 0.0;</td></tr><tr><td class="line-number" value="820"></td><td class="line-content">    gl.uniform3fv(prog.uniforms.uOffset, pointFlower.offset);</td></tr><tr><td class="line-number" value="821"></td><td class="line-content">    gl.drawArrays(gl.POINT, 0, pointFlower.numFlowers);</td></tr><tr><td class="line-number" value="822"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="823"></td><td class="line-content">    gl.bindBuffer(gl.ARRAY_BUFFER, null);</td></tr><tr><td class="line-number" value="824"></td><td class="line-content">    unuseShader(prog);</td></tr><tr><td class="line-number" value="825"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="826"></td><td class="line-content">    gl.enable(gl.DEPTH_TEST);</td></tr><tr><td class="line-number" value="827"></td><td class="line-content">    gl.disable(gl.BLEND);</td></tr><tr><td class="line-number" value="828"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="829"></td><td class="line-content"></td></tr><tr><td class="line-number" value="830"></td><td class="line-content">// effects</td></tr><tr><td class="line-number" value="831"></td><td class="line-content">//common util</td></tr><tr><td class="line-number" value="832"></td><td class="line-content">function createEffectProgram(vtxsrc, frgsrc, exunifs, exattrs) {</td></tr><tr><td class="line-number" value="833"></td><td class="line-content">    var ret = {};</td></tr><tr><td class="line-number" value="834"></td><td class="line-content">    var unifs = ['uResolution', 'uSrc', 'uDelta'];</td></tr><tr><td class="line-number" value="835"></td><td class="line-content">    if(exunifs) {</td></tr><tr><td class="line-number" value="836"></td><td class="line-content">        unifs = unifs.concat(exunifs);</td></tr><tr><td class="line-number" value="837"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="838"></td><td class="line-content">    var attrs = ['aPosition'];</td></tr><tr><td class="line-number" value="839"></td><td class="line-content">    if(exattrs) {</td></tr><tr><td class="line-number" value="840"></td><td class="line-content">        attrs = attrs.concat(exattrs);</td></tr><tr><td class="line-number" value="841"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="842"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="843"></td><td class="line-content">    ret.program = createShader(vtxsrc, frgsrc, unifs, attrs);</td></tr><tr><td class="line-number" value="844"></td><td class="line-content">    useShader(ret.program);</td></tr><tr><td class="line-number" value="845"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="846"></td><td class="line-content">    ret.dataArray = new Float32Array([</td></tr><tr><td class="line-number" value="847"></td><td class="line-content">        -1.0, -1.0,</td></tr><tr><td class="line-number" value="848"></td><td class="line-content">         1.0, -1.0,</td></tr><tr><td class="line-number" value="849"></td><td class="line-content">        -1.0,  1.0,</td></tr><tr><td class="line-number" value="850"></td><td class="line-content">         1.0,  1.0</td></tr><tr><td class="line-number" value="851"></td><td class="line-content">    ]);</td></tr><tr><td class="line-number" value="852"></td><td class="line-content">    ret.buffer = gl.createBuffer();</td></tr><tr><td class="line-number" value="853"></td><td class="line-content">    gl.bindBuffer(gl.ARRAY_BUFFER, ret.buffer);</td></tr><tr><td class="line-number" value="854"></td><td class="line-content">    gl.bufferData(gl.ARRAY_BUFFER, ret.dataArray, gl.STATIC_DRAW);</td></tr><tr><td class="line-number" value="855"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="856"></td><td class="line-content">    gl.bindBuffer(gl.ARRAY_BUFFER, null);</td></tr><tr><td class="line-number" value="857"></td><td class="line-content">    unuseShader(ret.program);</td></tr><tr><td class="line-number" value="858"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="859"></td><td class="line-content">    return ret;</td></tr><tr><td class="line-number" value="860"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="861"></td><td class="line-content"></td></tr><tr><td class="line-number" value="862"></td><td class="line-content">// basic usage</td></tr><tr><td class="line-number" value="863"></td><td class="line-content">// useEffect(prog, srctex({'texture':texid, 'dtxArray':(f32)[dtx, dty]})); //basic initialize</td></tr><tr><td class="line-number" value="864"></td><td class="line-content">// gl.uniform**(...); //additional uniforms</td></tr><tr><td class="line-number" value="865"></td><td class="line-content">// drawEffect()</td></tr><tr><td class="line-number" value="866"></td><td class="line-content">// unuseEffect(prog)</td></tr><tr><td class="line-number" value="867"></td><td class="line-content">// TEXTURE0 makes src</td></tr><tr><td class="line-number" value="868"></td><td class="line-content">function useEffect(fxobj, srctex) {</td></tr><tr><td class="line-number" value="869"></td><td class="line-content">    var prog = fxobj.program;</td></tr><tr><td class="line-number" value="870"></td><td class="line-content">    useShader(prog);</td></tr><tr><td class="line-number" value="871"></td><td class="line-content">    gl.uniform3fv(prog.uniforms.uResolution, renderSpec.array);</td></tr><tr><td class="line-number" value="872"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="873"></td><td class="line-content">    if(srctex != null) {</td></tr><tr><td class="line-number" value="874"></td><td class="line-content">        gl.uniform2fv(prog.uniforms.uDelta, srctex.dtxArray);</td></tr><tr><td class="line-number" value="875"></td><td class="line-content">        gl.uniform1i(prog.uniforms.uSrc, 0);</td></tr><tr><td class="line-number" value="876"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="877"></td><td class="line-content">        gl.activeTexture(gl.TEXTURE0);</td></tr><tr><td class="line-number" value="878"></td><td class="line-content">        gl.bindTexture(gl.TEXTURE_2D, srctex.texture);</td></tr><tr><td class="line-number" value="879"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="880"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="881"></td><td class="line-content">function drawEffect(fxobj) {</td></tr><tr><td class="line-number" value="882"></td><td class="line-content">    gl.bindBuffer(gl.ARRAY_BUFFER, fxobj.buffer);</td></tr><tr><td class="line-number" value="883"></td><td class="line-content">    gl.vertexAttribPointer(fxobj.program.attributes.aPosition, 2, gl.FLOAT, false, 0, 0);</td></tr><tr><td class="line-number" value="884"></td><td class="line-content">    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);</td></tr><tr><td class="line-number" value="885"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="886"></td><td class="line-content">function unuseEffect(fxobj) {</td></tr><tr><td class="line-number" value="887"></td><td class="line-content">    unuseShader(fxobj.program);</td></tr><tr><td class="line-number" value="888"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="889"></td><td class="line-content"></td></tr><tr><td class="line-number" value="890"></td><td class="line-content">var effectLib = {};</td></tr><tr><td class="line-number" value="891"></td><td class="line-content">function createEffectLib() {</td></tr><tr><td class="line-number" value="892"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="893"></td><td class="line-content">    var vtxsrc, frgsrc;</td></tr><tr><td class="line-number" value="894"></td><td class="line-content">    //common</td></tr><tr><td class="line-number" value="895"></td><td class="line-content">    var cmnvtxsrc = document.getElementById("fx_common_vsh").textContent;</td></tr><tr><td class="line-number" value="896"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="897"></td><td class="line-content">    //background</td></tr><tr><td class="line-number" value="898"></td><td class="line-content">    frgsrc = document.getElementById("bg_fsh").textContent;</td></tr><tr><td class="line-number" value="899"></td><td class="line-content">    effectLib.sceneBg = createEffectProgram(cmnvtxsrc, frgsrc, ['uTimes'], null);</td></tr><tr><td class="line-number" value="900"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="901"></td><td class="line-content">    // make brightpixels buffer</td></tr><tr><td class="line-number" value="902"></td><td class="line-content">    frgsrc = document.getElementById("fx_brightbuf_fsh").textContent;</td></tr><tr><td class="line-number" value="903"></td><td class="line-content">    effectLib.mkBrightBuf = createEffectProgram(cmnvtxsrc, frgsrc, null, null);</td></tr><tr><td class="line-number" value="904"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="905"></td><td class="line-content">    // direction blur</td></tr><tr><td class="line-number" value="906"></td><td class="line-content">    frgsrc = document.getElementById("fx_dirblur_r4_fsh").textContent;</td></tr><tr><td class="line-number" value="907"></td><td class="line-content">    effectLib.dirBlur = createEffectProgram(cmnvtxsrc, frgsrc, ['uBlurDir'], null);</td></tr><tr><td class="line-number" value="908"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="909"></td><td class="line-content">    //final composite</td></tr><tr><td class="line-number" value="910"></td><td class="line-content">    vtxsrc = document.getElementById("pp_final_vsh").textContent;</td></tr><tr><td class="line-number" value="911"></td><td class="line-content">    frgsrc = document.getElementById("pp_final_fsh").textContent;</td></tr><tr><td class="line-number" value="912"></td><td class="line-content">    effectLib.finalComp = createEffectProgram(vtxsrc, frgsrc, ['uBloom'], null);</td></tr><tr><td class="line-number" value="913"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="914"></td><td class="line-content"></td></tr><tr><td class="line-number" value="915"></td><td class="line-content">// background</td></tr><tr><td class="line-number" value="916"></td><td class="line-content">function createBackground() {</td></tr><tr><td class="line-number" value="917"></td><td class="line-content">    //console.log("create background");</td></tr><tr><td class="line-number" value="918"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="919"></td><td class="line-content">function initBackground() {</td></tr><tr><td class="line-number" value="920"></td><td class="line-content">    //console.log("init background");</td></tr><tr><td class="line-number" value="921"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="922"></td><td class="line-content">function renderBackground() {</td></tr><tr><td class="line-number" value="923"></td><td class="line-content">    gl.disable(gl.DEPTH_TEST);</td></tr><tr><td class="line-number" value="924"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="925"></td><td class="line-content">    useEffect(effectLib.sceneBg, null);</td></tr><tr><td class="line-number" value="926"></td><td class="line-content">    gl.uniform2f(effectLib.sceneBg.program.uniforms.uTimes, timeInfo.elapsed, timeInfo.delta);</td></tr><tr><td class="line-number" value="927"></td><td class="line-content">    drawEffect(effectLib.sceneBg);</td></tr><tr><td class="line-number" value="928"></td><td class="line-content">    unuseEffect(effectLib.sceneBg);</td></tr><tr><td class="line-number" value="929"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="930"></td><td class="line-content">    gl.enable(gl.DEPTH_TEST);</td></tr><tr><td class="line-number" value="931"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="932"></td><td class="line-content"></td></tr><tr><td class="line-number" value="933"></td><td class="line-content">// post process</td></tr><tr><td class="line-number" value="934"></td><td class="line-content">var postProcess = {};</td></tr><tr><td class="line-number" value="935"></td><td class="line-content">function createPostProcess() {</td></tr><tr><td class="line-number" value="936"></td><td class="line-content">    //console.log("create post process");</td></tr><tr><td class="line-number" value="937"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="938"></td><td class="line-content">function initPostProcess() {</td></tr><tr><td class="line-number" value="939"></td><td class="line-content">    //console.log("init post process");</td></tr><tr><td class="line-number" value="940"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="941"></td><td class="line-content"></td></tr><tr><td class="line-number" value="942"></td><td class="line-content">function renderPostProcess() {</td></tr><tr><td class="line-number" value="943"></td><td class="line-content">    gl.enable(gl.TEXTURE_2D);</td></tr><tr><td class="line-number" value="944"></td><td class="line-content">    gl.disable(gl.DEPTH_TEST);</td></tr><tr><td class="line-number" value="945"></td><td class="line-content">    var bindRT = function (rt, isclear) {</td></tr><tr><td class="line-number" value="946"></td><td class="line-content">        gl.bindFramebuffer(gl.FRAMEBUFFER, rt.frameBuffer);</td></tr><tr><td class="line-number" value="947"></td><td class="line-content">        gl.viewport(0, 0, rt.width, rt.height);</td></tr><tr><td class="line-number" value="948"></td><td class="line-content">        if(isclear) {</td></tr><tr><td class="line-number" value="949"></td><td class="line-content">            gl.clearColor(0, 0, 0, 0);</td></tr><tr><td class="line-number" value="950"></td><td class="line-content">            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</td></tr><tr><td class="line-number" value="951"></td><td class="line-content">        }</td></tr><tr><td class="line-number" value="952"></td><td class="line-content">    };</td></tr><tr><td class="line-number" value="953"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="954"></td><td class="line-content">    //make bright buff</td></tr><tr><td class="line-number" value="955"></td><td class="line-content">    bindRT(renderSpec.wHalfRT0, true);</td></tr><tr><td class="line-number" value="956"></td><td class="line-content">    useEffect(effectLib.mkBrightBuf, renderSpec.mainRT);</td></tr><tr><td class="line-number" value="957"></td><td class="line-content">    drawEffect(effectLib.mkBrightBuf);</td></tr><tr><td class="line-number" value="958"></td><td class="line-content">    unuseEffect(effectLib.mkBrightBuf);</td></tr><tr><td class="line-number" value="959"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="960"></td><td class="line-content">    // make bloom</td></tr><tr><td class="line-number" value="961"></td><td class="line-content">    for(var i = 0; i &lt; 2; i++) {</td></tr><tr><td class="line-number" value="962"></td><td class="line-content">        var p = 1.5 + 1 * i;</td></tr><tr><td class="line-number" value="963"></td><td class="line-content">        var s = 2.0 + 1 * i;</td></tr><tr><td class="line-number" value="964"></td><td class="line-content">        bindRT(renderSpec.wHalfRT1, true);</td></tr><tr><td class="line-number" value="965"></td><td class="line-content">        useEffect(effectLib.dirBlur, renderSpec.wHalfRT0);</td></tr><tr><td class="line-number" value="966"></td><td class="line-content">        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, p, 0.0, s, 0.0);</td></tr><tr><td class="line-number" value="967"></td><td class="line-content">        drawEffect(effectLib.dirBlur);</td></tr><tr><td class="line-number" value="968"></td><td class="line-content">        unuseEffect(effectLib.dirBlur);</td></tr><tr><td class="line-number" value="969"></td><td class="line-content">        </td></tr><tr><td class="line-number" value="970"></td><td class="line-content">        bindRT(renderSpec.wHalfRT0, true);</td></tr><tr><td class="line-number" value="971"></td><td class="line-content">        useEffect(effectLib.dirBlur, renderSpec.wHalfRT1);</td></tr><tr><td class="line-number" value="972"></td><td class="line-content">        gl.uniform4f(effectLib.dirBlur.program.uniforms.uBlurDir, 0.0, p, 0.0, s);</td></tr><tr><td class="line-number" value="973"></td><td class="line-content">        drawEffect(effectLib.dirBlur);</td></tr><tr><td class="line-number" value="974"></td><td class="line-content">        unuseEffect(effectLib.dirBlur);</td></tr><tr><td class="line-number" value="975"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="976"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="977"></td><td class="line-content">    //display</td></tr><tr><td class="line-number" value="978"></td><td class="line-content">    gl.bindFramebuffer(gl.FRAMEBUFFER, null);</td></tr><tr><td class="line-number" value="979"></td><td class="line-content">    gl.viewport(0, 0, renderSpec.width, renderSpec.height);</td></tr><tr><td class="line-number" value="980"></td><td class="line-content">    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</td></tr><tr><td class="line-number" value="981"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="982"></td><td class="line-content">    useEffect(effectLib.finalComp, renderSpec.mainRT);</td></tr><tr><td class="line-number" value="983"></td><td class="line-content">    gl.uniform1i(effectLib.finalComp.program.uniforms.uBloom, 1);</td></tr><tr><td class="line-number" value="984"></td><td class="line-content">    gl.activeTexture(gl.TEXTURE1);</td></tr><tr><td class="line-number" value="985"></td><td class="line-content">    gl.bindTexture(gl.TEXTURE_2D, renderSpec.wHalfRT0.texture);</td></tr><tr><td class="line-number" value="986"></td><td class="line-content">    drawEffect(effectLib.finalComp);</td></tr><tr><td class="line-number" value="987"></td><td class="line-content">    unuseEffect(effectLib.finalComp);</td></tr><tr><td class="line-number" value="988"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="989"></td><td class="line-content">    gl.enable(gl.DEPTH_TEST);</td></tr><tr><td class="line-number" value="990"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="991"></td><td class="line-content"></td></tr><tr><td class="line-number" value="992"></td><td class="line-content">/////</td></tr><tr><td class="line-number" value="993"></td><td class="line-content">var SceneEnv = {};</td></tr><tr><td class="line-number" value="994"></td><td class="line-content">function createScene() {</td></tr><tr><td class="line-number" value="995"></td><td class="line-content">    createEffectLib();</td></tr><tr><td class="line-number" value="996"></td><td class="line-content">    createBackground();</td></tr><tr><td class="line-number" value="997"></td><td class="line-content">    createPointFlowers();</td></tr><tr><td class="line-number" value="998"></td><td class="line-content">    createPostProcess();</td></tr><tr><td class="line-number" value="999"></td><td class="line-content">    sceneStandBy = true;</td></tr><tr><td class="line-number" value="1000"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1001"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1002"></td><td class="line-content">function initScene() {</td></tr><tr><td class="line-number" value="1003"></td><td class="line-content">    initBackground();</td></tr><tr><td class="line-number" value="1004"></td><td class="line-content">    initPointFlowers();</td></tr><tr><td class="line-number" value="1005"></td><td class="line-content">    initPostProcess();</td></tr><tr><td class="line-number" value="1006"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1007"></td><td class="line-content">    //camera.position.z = 17.320508;</td></tr><tr><td class="line-number" value="1008"></td><td class="line-content">    camera.position.z = pointFlower.area.z + projection.nearfar[0];</td></tr><tr><td class="line-number" value="1009"></td><td class="line-content">    projection.angle = Math.atan2(pointFlower.area.y, camera.position.z + pointFlower.area.z) * 180.0 / Math.PI * 2.0;</td></tr><tr><td class="line-number" value="1010"></td><td class="line-content">    Matrix44.loadProjection(projection.matrix, renderSpec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);</td></tr><tr><td class="line-number" value="1011"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1012"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1013"></td><td class="line-content">function renderScene() {</td></tr><tr><td class="line-number" value="1014"></td><td class="line-content">    //draw</td></tr><tr><td class="line-number" value="1015"></td><td class="line-content">    Matrix44.loadLookAt(camera.matrix, camera.position, camera.lookat, camera.up);</td></tr><tr><td class="line-number" value="1016"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1017"></td><td class="line-content">    gl.enable(gl.DEPTH_TEST);</td></tr><tr><td class="line-number" value="1018"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1019"></td><td class="line-content">    //gl.bindFramebuffer(gl.FRAMEBUFFER, null);</td></tr><tr><td class="line-number" value="1020"></td><td class="line-content">    gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);</td></tr><tr><td class="line-number" value="1021"></td><td class="line-content">    gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);</td></tr><tr><td class="line-number" value="1022"></td><td class="line-content">    gl.clearColor(0.005, 0, 0.05, 0);</td></tr><tr><td class="line-number" value="1023"></td><td class="line-content">    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</td></tr><tr><td class="line-number" value="1024"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1025"></td><td class="line-content">    renderBackground();</td></tr><tr><td class="line-number" value="1026"></td><td class="line-content">    renderPointFlowers();</td></tr><tr><td class="line-number" value="1027"></td><td class="line-content">    renderPostProcess();</td></tr><tr><td class="line-number" value="1028"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1029"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1030"></td><td class="line-content">/////</td></tr><tr><td class="line-number" value="1031"></td><td class="line-content">function onResize(e) {</td></tr><tr><td class="line-number" value="1032"></td><td class="line-content">    makeCanvasFullScreen(document.getElementById("sakura"));</td></tr><tr><td class="line-number" value="1033"></td><td class="line-content">    setViewports();</td></tr><tr><td class="line-number" value="1034"></td><td class="line-content">    if(sceneStandBy) {</td></tr><tr><td class="line-number" value="1035"></td><td class="line-content">        initScene();</td></tr><tr><td class="line-number" value="1036"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="1037"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1038"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1039"></td><td class="line-content">function setViewports() {</td></tr><tr><td class="line-number" value="1040"></td><td class="line-content">    renderSpec.setSize(gl.canvas.width, gl.canvas.height);</td></tr><tr><td class="line-number" value="1041"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1042"></td><td class="line-content">    gl.clearColor(0.2, 0.2, 0.5, 1.0);</td></tr><tr><td class="line-number" value="1043"></td><td class="line-content">    gl.viewport(0, 0, renderSpec.width, renderSpec.height);</td></tr><tr><td class="line-number" value="1044"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1045"></td><td class="line-content">    var rtfunc = function (rtname, rtw, rth) {</td></tr><tr><td class="line-number" value="1046"></td><td class="line-content">        var rt = renderSpec[rtname];</td></tr><tr><td class="line-number" value="1047"></td><td class="line-content">        if(rt) deleteRenderTarget(rt);</td></tr><tr><td class="line-number" value="1048"></td><td class="line-content">        renderSpec[rtname] = createRenderTarget(rtw, rth);</td></tr><tr><td class="line-number" value="1049"></td><td class="line-content">    };</td></tr><tr><td class="line-number" value="1050"></td><td class="line-content">    rtfunc('mainRT', renderSpec.width, renderSpec.height);</td></tr><tr><td class="line-number" value="1051"></td><td class="line-content">    rtfunc('wFullRT0', renderSpec.width, renderSpec.height);</td></tr><tr><td class="line-number" value="1052"></td><td class="line-content">    rtfunc('wFullRT1', renderSpec.width, renderSpec.height);</td></tr><tr><td class="line-number" value="1053"></td><td class="line-content">    rtfunc('wHalfRT0', renderSpec.halfWidth, renderSpec.halfHeight);</td></tr><tr><td class="line-number" value="1054"></td><td class="line-content">    rtfunc('wHalfRT1', renderSpec.halfWidth, renderSpec.halfHeight);</td></tr><tr><td class="line-number" value="1055"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1056"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1057"></td><td class="line-content">function render() {</td></tr><tr><td class="line-number" value="1058"></td><td class="line-content">    renderScene();</td></tr><tr><td class="line-number" value="1059"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1060"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1061"></td><td class="line-content">var animating = true;</td></tr><tr><td class="line-number" value="1062"></td><td class="line-content">function toggleAnimation(elm) {</td></tr><tr><td class="line-number" value="1063"></td><td class="line-content">    animating ^= true;</td></tr><tr><td class="line-number" value="1064"></td><td class="line-content">    if(animating) animate();</td></tr><tr><td class="line-number" value="1065"></td><td class="line-content">    if(elm) {</td></tr><tr><td class="line-number" value="1066"></td><td class="line-content">        elm.innerHTML = animating? "Stop":"Start";</td></tr><tr><td class="line-number" value="1067"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="1068"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1069"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1070"></td><td class="line-content">function stepAnimation() {</td></tr><tr><td class="line-number" value="1071"></td><td class="line-content">    if(!animating) animate();</td></tr><tr><td class="line-number" value="1072"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1073"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1074"></td><td class="line-content">function animate() {</td></tr><tr><td class="line-number" value="1075"></td><td class="line-content">    var curdate = new Date();</td></tr><tr><td class="line-number" value="1076"></td><td class="line-content">    timeInfo.elapsed = (curdate - timeInfo.start) / 1000.0;</td></tr><tr><td class="line-number" value="1077"></td><td class="line-content">    timeInfo.delta = (curdate - timeInfo.prev) / 1000.0;</td></tr><tr><td class="line-number" value="1078"></td><td class="line-content">    timeInfo.prev = curdate;</td></tr><tr><td class="line-number" value="1079"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1080"></td><td class="line-content">    if(animating) requestAnimationFrame(animate);</td></tr><tr><td class="line-number" value="1081"></td><td class="line-content">    render();</td></tr><tr><td class="line-number" value="1082"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1083"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1084"></td><td class="line-content">function makeCanvasFullScreen(canvas) {</td></tr><tr><td class="line-number" value="1085"></td><td class="line-content">    var b = document.body;</td></tr><tr><td class="line-number" value="1086"></td><td class="line-content">	var d = document.documentElement;</td></tr><tr><td class="line-number" value="1087"></td><td class="line-content">	fullw = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);</td></tr><tr><td class="line-number" value="1088"></td><td class="line-content">	fullh = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);</td></tr><tr><td class="line-number" value="1089"></td><td class="line-content">	canvas.width = fullw;</td></tr><tr><td class="line-number" value="1090"></td><td class="line-content">	canvas.height = fullh;</td></tr><tr><td class="line-number" value="1091"></td><td class="line-content">}</td></tr><tr><td class="line-number" value="1092"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1093"></td><td class="line-content">window.addEventListener('load', function(e) {</td></tr><tr><td class="line-number" value="1094"></td><td class="line-content">    var canvas = document.getElementById("sakura");</td></tr><tr><td class="line-number" value="1095"></td><td class="line-content">    try {</td></tr><tr><td class="line-number" value="1096"></td><td class="line-content">        makeCanvasFullScreen(canvas);</td></tr><tr><td class="line-number" value="1097"></td><td class="line-content">        gl = canvas.getContext('experimental-webgl');</td></tr><tr><td class="line-number" value="1098"></td><td class="line-content">    } catch(e) {</td></tr><tr><td class="line-number" value="1099"></td><td class="line-content">        alert("WebGL not supported." + e);</td></tr><tr><td class="line-number" value="1100"></td><td class="line-content">        console.error(e);</td></tr><tr><td class="line-number" value="1101"></td><td class="line-content">        return;</td></tr><tr><td class="line-number" value="1102"></td><td class="line-content">    }</td></tr><tr><td class="line-number" value="1103"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1104"></td><td class="line-content">    window.addEventListener('resize', onResize);</td></tr><tr><td class="line-number" value="1105"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1106"></td><td class="line-content">    setViewports();</td></tr><tr><td class="line-number" value="1107"></td><td class="line-content">    createScene();</td></tr><tr><td class="line-number" value="1108"></td><td class="line-content">    initScene();</td></tr><tr><td class="line-number" value="1109"></td><td class="line-content">    </td></tr><tr><td class="line-number" value="1110"></td><td class="line-content">    timeInfo.start = new Date();</td></tr><tr><td class="line-number" value="1111"></td><td class="line-content">    timeInfo.prev = timeInfo.start;</td></tr><tr><td class="line-number" value="1112"></td><td class="line-content">    animate();</td></tr><tr><td class="line-number" value="1113"></td><td class="line-content">});</td></tr><tr><td class="line-number" value="1114"></td><td class="line-content"></td></tr><tr><td class="line-number" value="1115"></td><td class="line-content">//set window.requestAnimationFrame</td></tr><tr><td class="line-number" value="1116"></td><td class="line-content">(function (w, r) {</td></tr><tr><td class="line-number" value="1117"></td><td class="line-content">    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };</td></tr><tr><td class="line-number" value="1118"></td><td class="line-content">})(window, 'equestAnimationFrame');</td></tr><tr><td class="line-number" value="1119"></td><td class="line-content"><span class="html-tag">&lt;/script&gt;</span></td></tr><tr><td class="line-number" value="1120"></td><td class="line-content"><span class="html-tag">&lt;/html&gt;</span></td></tr><tr><td class="line-number" value="1121"></td><td class="line-content"><span class="html-end-of-file"></span></td></tr></tbody></table></body></html>